eRgo35/website
1
0
Fork 0
mirror of https://github.com/eRgo35/website.git synced 2026-02-04 05:26:11 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

theme mobile formatting

Browse Source
This commit is contained in:
Michał Czyż
2023-05-19 11:23:59 +02:00
parent e376d9c21f
commit 4e5862ee0a
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/index.html
View File

@@ -35,10 +35,7 @@
<meta name="twitter:image" content="./assets/card.png"> <meta name="twitter:image" content="./assets/card.png">
<link rel="apple-touch-icon" href="./assets/logo192.png" /> <link rel="apple-touch-icon" href="./assets/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />

30
public/styles.css
View File

@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* { * {
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
@@ -87,11 +87,12 @@ body {
color: var(--text); color: var(--text);
display: grid; display: grid;
place-items: center; place-items: center;
font-family: 'Schibsted Grotesk', sans-serif; font-family: "Schibsted Grotesk", sans-serif;
} }
.page { .page {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px,
rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
box-sizing: border-box; box-sizing: border-box;
width: 8.5in; width: 8.5in;
height: 11in; height: 11in;
@@ -217,7 +218,6 @@ a:focus {
} }
@media only screen and (min-width: 768px) and (max-width: 900px) { @media only screen and (min-width: 768px) and (max-width: 900px) {
/* tablets and desktop */ /* tablets and desktop */
.page { .page {
width: 100%; width: 100%;
@@ -233,6 +233,10 @@ a:focus {
grid-template-columns: auto; grid-template-columns: auto;
} }
.theme:focus, .theme:active, .theme:hover {
max-width: 0.25in;
}
.copyright { .copyright {
text-align: center; text-align: center;
} }
@@ -244,7 +248,6 @@ a:focus {
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
/* phones */ /* phones */
.page { .page {
width: 100%; width: 100%;
@@ -252,12 +255,27 @@ a:focus {
margin: 0; margin: 0;
padding: 0.25in; padding: 0.25in;
box-shadow: none; box-shadow: none;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0.85in 0.2fr 0.4fr auto;
gap: 0px 0px;
grid-template-areas:
"header"
"aside"
"bio"
"world"
"footer";
}
.theme:focus, .theme:active {
max-width: 0.25in;
} }
.bio { .bio {
grid-template-columns: none; grid-template-columns: none;
grid-template-rows: 2.5in 1fr; grid-template-rows: 2.5in 1fr;
place-items: center; place-items: center;
padding: 0;
} }
.avatar { .avatar {