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">
<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="stylesheet" href="styles.css" />

44
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/icon?family=Material+Icons');
@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");
* {
transition: background-color 0.2s ease-in-out;
@@ -87,11 +87,12 @@ body {
color: var(--text);
display: grid;
place-items: center;
font-family: 'Schibsted Grotesk', sans-serif;
font-family: "Schibsted Grotesk", sans-serif;
}
.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;
width: 8.5in;
height: 11in;
@@ -99,15 +100,15 @@ body {
padding: 0.5in;
position: relative;
animation: 0.4s ease-out 0s 1 fadein;
display: grid;
grid-template-columns: 1fr 2.5in;
grid-template-rows: 0.85in 0.2fr 0.4fr auto;
gap: 0px 0px;
grid-template-areas:
display: grid;
grid-template-columns: 1fr 2.5in;
grid-template-rows: 0.85in 0.2fr 0.4fr auto;
gap: 0px 0px;
grid-template-areas:
"header header"
"bio aside"
"world aside"
"footer footer";
"footer footer";
}
a {
@@ -217,7 +218,6 @@ a:focus {
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
/* tablets and desktop */
.page {
width: 100%;
@@ -233,6 +233,10 @@ a:focus {
grid-template-columns: auto;
}
.theme:focus, .theme:active, .theme:hover {
max-width: 0.25in;
}
.copyright {
text-align: center;
}
@@ -244,7 +248,6 @@ a:focus {
}
@media only screen and (max-width: 767px) {
/* phones */
.page {
width: 100%;
@@ -252,12 +255,27 @@ a:focus {
margin: 0;
padding: 0.25in;
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 {
grid-template-columns: none;
grid-template-rows: 2.5in 1fr;
place-items: center;
padding: 0;
}
.avatar {
@@ -280,4 +298,4 @@ a:focus {
text-align: center;
grid-row: 1;
}
}
}