xtaodada/Homepage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adjust layout for mobile devices

Browse Source
This commit is contained in:
amphineko 2020-03-21 20:54:09 +08:00
parent 7e37fc75b8
commit e16b140c7e
No known key found for this signature in database
GPG Key ID: 4582E6587852EF42
4 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.css
View File

@ -86,4 +86,9 @@ html {
.intro .block .split { .intro .block .split {
padding: 0 0.5em; padding: 0 0.5em;
} }
.intro p {
border-left: none;
padding: 0.2em;
}
} }

6
src/index.html
View File

@ -116,7 +116,7 @@
<div class="split grid-50 mobile-grid-100"> <div class="split grid-50 mobile-grid-100">
<figure class="identities"> <figure class="identities">
<figcaption>open-source</figcaption> <figcaption><i class="fad fa-external-link-alt"></i>open-source</figcaption>
<ul> <ul>
<li> <li>
<a href="https://github.com/amphineko/"> <a href="https://github.com/amphineko/">
@ -129,7 +129,7 @@
</figure> </figure>
<figure class="identities"> <figure class="identities">
<figcaption>social network</figcaption> <figcaption><i class="fad fa-external-link-alt"></i>social network</figcaption>
<ul> <ul>
<li class="shutdown"> <li class="shutdown">
<a href="#"> <a href="#">
@ -189,7 +189,7 @@
<div class="split grid-50 mobile-grid-100"> <div class="split grid-50 mobile-grid-100">
<figure class="identities"> <figure class="identities">
<figcaption>profiles</figcaption> <figcaption><i class="fad fa-external-link-alt"></i>profiles</figcaption>
<ul> <ul>
<li> <li>
<a href="https://osu.ppy.sh/users/1344051"> <a href="https://osu.ppy.sh/users/1344051">

11
src/stylesheets/identities.css
View File

@ -9,8 +9,15 @@ figure.identities:last-child {
figure.identities figcaption { figure.identities figcaption {
color: #777; color: #777;
line-height: 1.5em; line-height: 2em;
padding: 0 2.25em; padding: 0 0.25em;
}
figure.identities figcaption i {
font-size: 1.21em;
margin-right: 0.5ch; /* margin from mystery space after identity brand icons */
text-align: center;
width: 1.5em;
} }
figure.identities ul { figure.identities ul {

11
src/stylesheets/intro.css
View File

@ -33,19 +33,22 @@
} }
.intro .label-group { .intro .label-group {
border-left: 0.25em solid #006080; border-left: 0.2em solid #4600806b;
margin-top: 2em; margin-top: 2em;
width: 100%; width: 100%;
} }
.intro .label-group .header.alt { .intro .label-group .header.alt {
color: #777; color: #777;
margin-left: 1em; font-size: 1em;
padding: 0 0.25em;
} }
.intro .label-group .header.alt .fa-tag { .intro .label-group .header.alt .fa-tag {
transform: rotate(-15deg); font-size: 1.21em;
margin-right: 0.5em; margin-right: 0.5ch;
text-align: center;
width: 1.5em;
} }
.intro .label-group .label { .intro .label-group .label {