mobile layout work
This commit is contained in:
bronku
parent
9ff9e59a8c
commit
94bc964e34
11 changed files with 348 additions and 203 deletions
47
css/base.css
47
css/base.css
|
|
@ -19,6 +19,12 @@
|
|||
--grid-cols: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--grid-cols: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--grid-cols: 1;
|
||||
|
|
@ -27,12 +33,14 @@
|
|||
|
||||
body {
|
||||
background-color: var(--surface);
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-family: serif;
|
||||
color: var(--on-background);
|
||||
|
|
@ -53,6 +61,22 @@ h2 {
|
|||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -63,7 +87,6 @@ h4 {
|
|||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -71,15 +94,26 @@ p {
|
|||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
body > nav, body > footer, body > main > * {
|
||||
body > nav,
|
||||
body > footer,
|
||||
body > main > * {
|
||||
padding: 8rem 2rem;
|
||||
|
||||
& > div:only-child, &:not(:has(>div:only-child)) {
|
||||
& > div:only-child,
|
||||
&:not(:has(> div:only-child)) {
|
||||
max-width: var(--max-content-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body > nav,
|
||||
body > footer,
|
||||
body > main > * {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
body > nav {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -98,4 +132,3 @@ ul {
|
|||
img {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@
|
|||
|
||||
transition-duration: 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -78,15 +80,17 @@
|
|||
transform: translateY(0);
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
|
||||
& img {
|
||||
scale: 1.1;
|
||||
}
|
||||
& img {
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-left: 10px;
|
||||
& svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,6 +129,19 @@
|
|||
gap: 1rem;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 1.5rem 0;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
|
||||
& > a {
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
padding: 0.4rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
& > h2 {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1/ span 3;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -174,8 +174,6 @@
|
|||
width: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
& div:first-child > img {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,11 @@
|
|||
& > div {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(to right, var(--surface), transparent);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--surface),
|
||||
transparent
|
||||
);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
|
@ -37,6 +41,10 @@
|
|||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
& > h1 {
|
||||
line-height: unset;
|
||||
}
|
||||
|
|
@ -74,7 +82,6 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
||||
|
||||
|
||||
width: 100%;
|
||||
gap: 2rem;
|
||||
|
||||
|
|
@ -119,7 +126,7 @@
|
|||
width: 100%;
|
||||
|
||||
& > header {
|
||||
grid-column: 1/ -1;
|
||||
grid-column: 1/ -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -166,6 +173,5 @@
|
|||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
175
css/layout.css
175
css/layout.css
|
|
@ -16,18 +16,31 @@ body > nav {
|
|||
width: 20rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
& img {
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
& img {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
& > .btn {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
justify-self: end
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
& > div {
|
||||
|
|
@ -35,93 +48,99 @@ body > nav {
|
|||
align-items: center;
|
||||
gap: 2rem;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
gap: 1rem;
|
||||
|
||||
& > a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-row: 2;
|
||||
grid-column: 1/ span 2;
|
||||
}
|
||||
grid-column: 1 / span 2;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > a {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: var(--on-background);
|
||||
& > a {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: var(--on-background);
|
||||
|
||||
&[href] {
|
||||
font-weight: 200;
|
||||
transition: color 0.2s;
|
||||
&[href] {
|
||||
font-weight: 200;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* The main selected link doesn't have a href attribute, so we can use that for styles */
|
||||
|
||||
&:not([href]) {
|
||||
padding-bottom: 8px;
|
||||
color: var(--primary);
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 2fr;
|
||||
gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
& p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
font-size: 0.75rem;
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(2) a {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& a {
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin: 1rem 0;
|
||||
text-decoration: none;
|
||||
color: var(--on-background);
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
& h4 {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 2fr;
|
||||
gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
& p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
font-size: 0.75rem;
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(2) a {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& a {
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin: 1rem 0;
|
||||
text-decoration: none;
|
||||
color: var(--on-background);
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
& h4 {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
120
css/normalize.css
vendored
120
css/normalize.css
vendored
|
|
@ -9,8 +9,8 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
|
|
@ -21,7 +21,7 @@ html {
|
|||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -29,7 +29,7 @@ body {
|
|||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -38,8 +38,8 @@ main {
|
|||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
|
|
@ -51,9 +51,9 @@ h1 {
|
|||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -62,8 +62,8 @@ hr {
|
|||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
|
|
@ -74,7 +74,7 @@ pre {
|
|||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -83,9 +83,9 @@ a {
|
|||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -94,7 +94,7 @@ abbr[title] {
|
|||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -105,8 +105,8 @@ strong {
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -114,7 +114,7 @@ samp {
|
|||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -124,18 +124,18 @@ small {
|
|||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
|
|
@ -146,7 +146,7 @@ sup {
|
|||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
|
|
@ -162,10 +162,10 @@ input,
|
|||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -174,8 +174,9 @@ textarea {
|
|||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -184,8 +185,9 @@ input { /* 1 */
|
|||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -196,7 +198,7 @@ button,
|
|||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -207,8 +209,8 @@ button::-moz-focus-inner,
|
|||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -219,7 +221,7 @@ button:-moz-focusring,
|
|||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -227,7 +229,7 @@ button:-moz-focusring,
|
|||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -238,12 +240,12 @@ fieldset {
|
|||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -251,7 +253,7 @@ legend {
|
|||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -259,7 +261,7 @@ progress {
|
|||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -269,8 +271,8 @@ textarea {
|
|||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -279,7 +281,7 @@ textarea {
|
|||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -288,8 +290,8 @@ textarea {
|
|||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -297,7 +299,7 @@ textarea {
|
|||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -306,8 +308,8 @@ textarea {
|
|||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
|
|
@ -318,7 +320,7 @@ textarea {
|
|||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -326,7 +328,7 @@ details {
|
|||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
|
|
@ -337,7 +339,7 @@ summary {
|
|||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -345,5 +347,5 @@ template {
|
|||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,15 @@
|
|||
grid-auto-flow: dense;
|
||||
gap: 1.5rem;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
aspect-ratio: 1/1;
|
||||
overflow: hidden;
|
||||
|
|
@ -78,8 +87,10 @@
|
|||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
& svg {
|
||||
|
|
@ -100,4 +111,29 @@
|
|||
& #lb-next {
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
& > button {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
& svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
& #lb-close {
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
& #lb-prev {
|
||||
left: 0.75rem;
|
||||
}
|
||||
|
||||
& #lb-next {
|
||||
right: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@
|
|||
|
||||
& > p {
|
||||
grid-row: 2;
|
||||
grid-column: 1/span 2;
|
||||
grid-column: 1 / span 2;
|
||||
color: var(--on-surface);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
gap: 1rem;
|
||||
|
||||
@media (max-width: 786px) {
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
|
@ -84,4 +84,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,20 +5,16 @@
|
|||
#rodzaje-tortow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
@media (max-width: 786px) {
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
gap: 2rem;
|
||||
|
||||
& > div {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#cennik-tortow {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
@media (max-width: 786px) {
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
gap: 2rem;
|
||||
|
|
@ -31,7 +27,6 @@
|
|||
& > span:last-child {
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -44,7 +39,8 @@
|
|||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
& > h3, & > svg {
|
||||
& > h3,
|
||||
& > svg {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +50,6 @@
|
|||
place-self: center;
|
||||
}
|
||||
|
||||
|
||||
& > ul {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--surface-container-highest);
|
||||
|
|
@ -67,13 +62,14 @@
|
|||
|
||||
&:first-child {
|
||||
font-weight: bold;
|
||||
background-color: rgb(from var(--secondary-container) r g b / 30%);
|
||||
background-color: rgb(
|
||||
from var(--secondary-container) r g b / 30%
|
||||
);
|
||||
|
||||
& > span:last-child {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +77,6 @@
|
|||
& > div:last-child > ul > li {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#menu-smakow {
|
||||
|
|
@ -124,8 +119,6 @@
|
|||
padding-top: 0.25rem;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +156,7 @@
|
|||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 786px) {
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
& > div {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -171,7 +164,8 @@
|
|||
}
|
||||
|
||||
& h4 {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif; /* Modern font for titles */
|
||||
font-family:
|
||||
"Plus Jakarta Sans", sans-serif; /* Modern font for titles */
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -184,5 +178,4 @@
|
|||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
(function () {
|
||||
var grid = document.getElementById('portfolio-grid');
|
||||
var grid = document.getElementById("portfolio-grid");
|
||||
if (!grid) return;
|
||||
|
||||
var items = Array.from(grid.children);
|
||||
if (!items.length) return;
|
||||
|
||||
var lb = document.createElement('div');
|
||||
lb.id = 'lightbox';
|
||||
var lb = document.createElement("div");
|
||||
lb.id = "lightbox";
|
||||
lb.innerHTML =
|
||||
'<button id="lb-close" aria-label="Zamknij"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>' +
|
||||
'<button id="lb-prev" aria-label="Poprzednie"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>' +
|
||||
|
|
@ -14,21 +14,21 @@
|
|||
'<button id="lb-next" aria-label="Następne"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>';
|
||||
document.body.appendChild(lb);
|
||||
|
||||
var lbImg = lb.querySelector('img');
|
||||
var lbImg = lb.querySelector("img");
|
||||
var current = -1;
|
||||
|
||||
function open(idx) {
|
||||
current = idx;
|
||||
var img = items[current].querySelector('img');
|
||||
lbImg.removeAttribute('src');
|
||||
lbImg.alt = '';
|
||||
lb.classList.add('open');
|
||||
var img = items[current].querySelector("img");
|
||||
lbImg.removeAttribute("src");
|
||||
lbImg.alt = "";
|
||||
lb.classList.add("open");
|
||||
lbImg.src = img.src;
|
||||
lbImg.alt = img.alt;
|
||||
}
|
||||
|
||||
function close() {
|
||||
lb.classList.remove('open');
|
||||
lb.classList.remove("open");
|
||||
current = -1;
|
||||
}
|
||||
|
||||
|
|
@ -43,21 +43,62 @@
|
|||
}
|
||||
|
||||
items.forEach(function (item, i) {
|
||||
item.addEventListener('click', function () { open(i); });
|
||||
item.addEventListener("click", function () {
|
||||
open(i);
|
||||
});
|
||||
});
|
||||
|
||||
lb.querySelector('#lb-close').addEventListener('click', close);
|
||||
lb.querySelector('#lb-prev').addEventListener('click', function (e) { e.stopPropagation(); prev(); });
|
||||
lb.querySelector('#lb-next').addEventListener('click', function (e) { e.stopPropagation(); next(); });
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (!lb.classList.contains('open')) return;
|
||||
if (e.key === 'Escape') { close(); e.preventDefault(); }
|
||||
if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }
|
||||
if (e.key === 'ArrowRight') { next(); e.preventDefault(); }
|
||||
lb.querySelector("#lb-close").addEventListener("click", close);
|
||||
lb.querySelector("#lb-prev").addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
prev();
|
||||
});
|
||||
lb.querySelector("#lb-next").addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
next();
|
||||
});
|
||||
|
||||
lb.addEventListener('click', function (e) {
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (!lb.classList.contains("open")) return;
|
||||
if (e.key === "Escape") {
|
||||
close();
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.key === "ArrowLeft") {
|
||||
prev();
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.key === "ArrowRight") {
|
||||
next();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
lb.addEventListener("click", function (e) {
|
||||
if (e.target === lb) close();
|
||||
});
|
||||
|
||||
var touchStartX = 0;
|
||||
var touchStartY = 0;
|
||||
lb.addEventListener(
|
||||
"touchstart",
|
||||
function (e) {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
touchStartY = e.changedTouches[0].screenY;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
lb.addEventListener(
|
||||
"touchend",
|
||||
function (e) {
|
||||
var dx = e.changedTouches[0].screenX - touchStartX;
|
||||
var dy = e.changedTouches[0].screenY - touchStartY;
|
||||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
|
||||
if (dx < 0) next();
|
||||
else prev();
|
||||
}
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue