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;
|
--grid-cols: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
:root {
|
||||||
|
--grid-cols: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
:root {
|
:root {
|
||||||
--grid-cols: 1;
|
--grid-cols: 1;
|
||||||
|
|
@ -27,12 +33,14 @@
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--surface);
|
background-color: var(--surface);
|
||||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
font-family: "Plus Jakarta Sans", sans-serif;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
h1, h2, h3, h4 {
|
h2,
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
color: var(--on-background);
|
color: var(--on-background);
|
||||||
|
|
@ -53,6 +61,22 @@ h2 {
|
||||||
font-size: 3.5rem;
|
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 {
|
h3 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -63,7 +87,6 @@ h4 {
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -71,15 +94,26 @@ p {
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav, body > footer, body > main > * {
|
body > nav,
|
||||||
|
body > footer,
|
||||||
|
body > main > * {
|
||||||
padding: 8rem 2rem;
|
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);
|
max-width: var(--max-content-width);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body > nav,
|
||||||
|
body > footer,
|
||||||
|
body > main > * {
|
||||||
|
padding: 4rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body > nav {
|
body > nav {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -98,4 +132,3 @@ ul {
|
||||||
img {
|
img {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,10 @@
|
||||||
|
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
&:hover {
|
@media (hover: hover) {
|
||||||
transform: scale(1.1);
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,15 +80,17 @@
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
|
|
||||||
&:hover {
|
@media (hover: hover) {
|
||||||
transform: translateY(-10px);
|
&:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
scale: 1.1;
|
scale: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
& svg {
|
& svg {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -125,6 +129,19 @@
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 3rem;
|
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 {
|
& > h2 {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
grid-column: 1/ span 3;
|
grid-column: 1 / span 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
@ -174,8 +174,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& div:first-child > img {
|
& div:first-child > img {
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,11 @@
|
||||||
& > div {
|
& > div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-image: linear-gradient(to right, var(--surface), transparent);
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
var(--surface),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
@ -37,6 +41,10 @@
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 4rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
& > h1 {
|
& > h1 {
|
||||||
line-height: unset;
|
line-height: unset;
|
||||||
}
|
}
|
||||||
|
|
@ -74,7 +82,6 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
||||||
|
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
|
|
@ -119,7 +126,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
& > header {
|
& > header {
|
||||||
grid-column: 1/ -1;
|
grid-column: 1/ -1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -166,6 +173,5 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
175
css/layout.css
175
css/layout.css
|
|
@ -16,18 +16,31 @@ body > nav {
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
& img {
|
||||||
|
width: 14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-template-rows: 1fr 1fr;
|
grid-template-rows: 1fr 1fr;
|
||||||
gap: 1rem;
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
& img {
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
& > .btn {
|
& > .btn {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > :last-child {
|
& > :last-child {
|
||||||
justify-self: end
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
|
|
@ -35,93 +48,99 @@ body > nav {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
grid-column: 1/ span 2;
|
grid-column: 1 / span 2;
|
||||||
}
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
& > a {
|
& > a {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--on-background);
|
color: var(--on-background);
|
||||||
|
|
||||||
&[href] {
|
&[href] {
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary);
|
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 {
|
html {
|
||||||
line-height: 1.15; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sections
|
/* Sections
|
||||||
|
|
@ -21,7 +21,7 @@ html {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -29,7 +29,7 @@ body {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -38,8 +38,8 @@ main {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin: 0.67em 0;
|
margin: 0.67em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grouping content
|
/* Grouping content
|
||||||
|
|
@ -51,9 +51,9 @@ h1 {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
box-sizing: content-box; /* 1 */
|
box-sizing: content-box; /* 1 */
|
||||||
height: 0; /* 1 */
|
height: 0; /* 1 */
|
||||||
overflow: visible; /* 2 */
|
overflow: visible; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -62,8 +62,8 @@ hr {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace, monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text-level semantics
|
/* Text-level semantics
|
||||||
|
|
@ -74,7 +74,7 @@ pre {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -83,9 +83,9 @@ a {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: none; /* 1 */
|
border-bottom: none; /* 1 */
|
||||||
text-decoration: underline; /* 2 */
|
text-decoration: underline; /* 2 */
|
||||||
text-decoration: underline dotted; /* 2 */
|
text-decoration: underline dotted; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -94,7 +94,7 @@ abbr[title] {
|
||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -105,8 +105,8 @@ strong {
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace, monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -114,7 +114,7 @@ samp {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -124,18 +124,18 @@ small {
|
||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub {
|
sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Embedded content
|
/* Embedded content
|
||||||
|
|
@ -146,7 +146,7 @@ sup {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Forms
|
/* Forms
|
||||||
|
|
@ -162,10 +162,10 @@ input,
|
||||||
optgroup,
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: inherit; /* 1 */
|
font-family: inherit; /* 1 */
|
||||||
font-size: 100%; /* 1 */
|
font-size: 100%; /* 1 */
|
||||||
line-height: 1.15; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
margin: 0; /* 2 */
|
margin: 0; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -174,8 +174,9 @@ textarea {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input { /* 1 */
|
input {
|
||||||
overflow: visible;
|
/* 1 */
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -184,8 +185,9 @@ input { /* 1 */
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
select { /* 1 */
|
select {
|
||||||
text-transform: none;
|
/* 1 */
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -196,7 +198,7 @@ button,
|
||||||
[type="button"],
|
[type="button"],
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="submit"] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -207,8 +209,8 @@ button::-moz-focus-inner,
|
||||||
[type="button"]::-moz-focus-inner,
|
[type="button"]::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type="reset"]::-moz-focus-inner,
|
||||||
[type="submit"]::-moz-focus-inner {
|
[type="submit"]::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -219,7 +221,7 @@ button:-moz-focusring,
|
||||||
[type="button"]:-moz-focusring,
|
[type="button"]:-moz-focusring,
|
||||||
[type="reset"]:-moz-focusring,
|
[type="reset"]:-moz-focusring,
|
||||||
[type="submit"]:-moz-focusring {
|
[type="submit"]:-moz-focusring {
|
||||||
outline: 1px dotted ButtonText;
|
outline: 1px dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -227,7 +229,7 @@ button:-moz-focusring,
|
||||||
*/
|
*/
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
padding: 0.35em 0.75em 0.625em;
|
padding: 0.35em 0.75em 0.625em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -238,12 +240,12 @@ fieldset {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
box-sizing: border-box; /* 1 */
|
box-sizing: border-box; /* 1 */
|
||||||
color: inherit; /* 2 */
|
color: inherit; /* 2 */
|
||||||
display: table; /* 1 */
|
display: table; /* 1 */
|
||||||
max-width: 100%; /* 1 */
|
max-width: 100%; /* 1 */
|
||||||
padding: 0; /* 3 */
|
padding: 0; /* 3 */
|
||||||
white-space: normal; /* 1 */
|
white-space: normal; /* 1 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -251,7 +253,7 @@ legend {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -259,7 +261,7 @@ progress {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -269,8 +271,8 @@ textarea {
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
box-sizing: border-box; /* 1 */
|
box-sizing: border-box; /* 1 */
|
||||||
padding: 0; /* 2 */
|
padding: 0; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -279,7 +281,7 @@ textarea {
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -288,8 +290,8 @@ textarea {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
-webkit-appearance: textfield; /* 1 */
|
-webkit-appearance: textfield; /* 1 */
|
||||||
outline-offset: -2px; /* 2 */
|
outline-offset: -2px; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -297,7 +299,7 @@ textarea {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type="search"]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -306,8 +308,8 @@ textarea {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button; /* 1 */
|
-webkit-appearance: button; /* 1 */
|
||||||
font: inherit; /* 2 */
|
font: inherit; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Interactive
|
/* Interactive
|
||||||
|
|
@ -318,7 +320,7 @@ textarea {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -326,7 +328,7 @@ details {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Misc
|
/* Misc
|
||||||
|
|
@ -337,7 +339,7 @@ summary {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
template {
|
template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -345,5 +347,5 @@ template {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,15 @@
|
||||||
grid-auto-flow: dense;
|
grid-auto-flow: dense;
|
||||||
gap: 1.5rem;
|
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;
|
aspect-ratio: 1/1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -78,8 +87,10 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
|
|
||||||
&:hover {
|
@media (hover: hover) {
|
||||||
background: rgba(0, 0, 0, 0.8);
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& svg {
|
& svg {
|
||||||
|
|
@ -100,4 +111,29 @@
|
||||||
& #lb-next {
|
& #lb-next {
|
||||||
right: 1.5rem;
|
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 {
|
& > p {
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
grid-column: 1/span 2;
|
grid-column: 1 / span 2;
|
||||||
color: var(--on-surface);
|
color: var(--on-surface);
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
|
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
||||||
@media (max-width: 786px) {
|
@media (max-width: 768px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -84,4 +84,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,20 +5,16 @@
|
||||||
#rodzaje-tortow {
|
#rodzaje-tortow {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
@media (max-width: 786px) {
|
@media (max-width: 768px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
& > div {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#cennik-tortow {
|
#cennik-tortow {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 2fr 1fr;
|
grid-template-columns: 2fr 1fr;
|
||||||
@media (max-width: 786px) {
|
@media (max-width: 768px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
@ -31,7 +27,6 @@
|
||||||
& > span:last-child {
|
& > span:last-child {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
|
|
@ -44,7 +39,8 @@
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
|
|
||||||
& > h3, & > svg {
|
& > h3,
|
||||||
|
& > svg {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,7 +50,6 @@
|
||||||
place-self: center;
|
place-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
& > ul {
|
& > ul {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid var(--surface-container-highest);
|
border: 1px solid var(--surface-container-highest);
|
||||||
|
|
@ -67,13 +62,14 @@
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
font-weight: bold;
|
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 {
|
& > span:last-child {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -81,7 +77,6 @@
|
||||||
& > div:last-child > ul > li {
|
& > div:last-child > ul > li {
|
||||||
padding: 0.75rem 0;
|
padding: 0.75rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-smakow {
|
#menu-smakow {
|
||||||
|
|
@ -124,8 +119,6 @@
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.25rem;
|
||||||
color: var(--on-surface-variant);
|
color: var(--on-surface-variant);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -163,7 +156,7 @@
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 786px) {
|
@media (max-width: 768px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
& > div {
|
& > div {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
@ -171,7 +164,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& h4 {
|
& 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;
|
font-weight: 700;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
|
@ -184,5 +178,4 @@
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
(function () {
|
(function () {
|
||||||
var grid = document.getElementById('portfolio-grid');
|
var grid = document.getElementById("portfolio-grid");
|
||||||
if (!grid) return;
|
if (!grid) return;
|
||||||
|
|
||||||
var items = Array.from(grid.children);
|
var items = Array.from(grid.children);
|
||||||
if (!items.length) return;
|
if (!items.length) return;
|
||||||
|
|
||||||
var lb = document.createElement('div');
|
var lb = document.createElement("div");
|
||||||
lb.id = 'lightbox';
|
lb.id = "lightbox";
|
||||||
lb.innerHTML =
|
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-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>' +
|
'<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>';
|
'<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);
|
document.body.appendChild(lb);
|
||||||
|
|
||||||
var lbImg = lb.querySelector('img');
|
var lbImg = lb.querySelector("img");
|
||||||
var current = -1;
|
var current = -1;
|
||||||
|
|
||||||
function open(idx) {
|
function open(idx) {
|
||||||
current = idx;
|
current = idx;
|
||||||
var img = items[current].querySelector('img');
|
var img = items[current].querySelector("img");
|
||||||
lbImg.removeAttribute('src');
|
lbImg.removeAttribute("src");
|
||||||
lbImg.alt = '';
|
lbImg.alt = "";
|
||||||
lb.classList.add('open');
|
lb.classList.add("open");
|
||||||
lbImg.src = img.src;
|
lbImg.src = img.src;
|
||||||
lbImg.alt = img.alt;
|
lbImg.alt = img.alt;
|
||||||
}
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
lb.classList.remove('open');
|
lb.classList.remove("open");
|
||||||
current = -1;
|
current = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,21 +43,62 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
items.forEach(function (item, i) {
|
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-close").addEventListener("click", close);
|
||||||
lb.querySelector('#lb-prev').addEventListener('click', function (e) { e.stopPropagation(); prev(); });
|
lb.querySelector("#lb-prev").addEventListener("click", function (e) {
|
||||||
lb.querySelector('#lb-next').addEventListener('click', function (e) { e.stopPropagation(); next(); });
|
e.stopPropagation();
|
||||||
|
prev();
|
||||||
document.addEventListener('keydown', function (e) {
|
});
|
||||||
if (!lb.classList.contains('open')) return;
|
lb.querySelector("#lb-next").addEventListener("click", function (e) {
|
||||||
if (e.key === 'Escape') { close(); e.preventDefault(); }
|
e.stopPropagation();
|
||||||
if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }
|
next();
|
||||||
if (e.key === 'ArrowRight') { next(); e.preventDefault(); }
|
|
||||||
});
|
});
|
||||||
|
|
||||||
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();
|
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