Skip to content

Commit

Permalink
feat: redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@gianlucalimbi
gianlucalimbi authored Aug 25, 2023
1 parent f54354d commit 048556b
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 57 deletions.
81 changes: 35 additions & 46 deletions assets/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ body {
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 48px 16px;
margin: 50px 25px;
}

#content {
Expand All @@ -27,91 +27,80 @@ body {
}

h1 {
margin-top: 48px;
margin-top: 25px;
font-size: 48px;
font-weight: bold;
}

p {
margin-top: 16px;
margin-top: 15px;
font-size: 16px;
line-height: 1.2;
}

#links {
margin-top: 32px;

.link {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 16px;
overflow: hidden;
margin-top: 15px 25px;
text-align: left;

a {
display: block;
padding: 16px;
font-size: 24px;
padding: 15px 25px;
font-size: 0;
font-weight: bold;
text-decoration: none;
position: relative;

span {
font-size: 24px;
}

.fa-brands {
margin-right: 4px;
margin-right: 10px;
}

.fa-solid {
position: absolute;
right: 16px;
right: 25px;
font-size: 16px;
opacity: 75%;
top: 20px;
}
}

p {
text-align: left;
padding: 16px;
background: #263238;
padding: 25px;
margin: 0;
}

&.twitch {
border-color: #9146FF;

a {
color: white;
background: #9146FF;
}
&.twitch a {
color: white;
background: #9146FF;
}

&.instagram {
border-color: #f09433;

a {
color: white;
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1);
}
&.instagram a {
color: white;
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1);
}

&.discord {
border-color: #5865f2;

a {
color: white;
background: #5865f2;
}
&.discord a {
color: white;
background: #5865f2;
}

&.telegram {
border-color: #179cde;
&.telegram a {
color: white;
background: #179cde;
}

a {
color: white;
background: #179cde;
}
&.youtube a {
color: white;
background: #ff0000;
}
}
}
31 changes: 20 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

<div id="content">
<figure id="profile-picture">
<img src="/assets/profile-limbi.jpg" alt="LimbiGames" />
<img src="/assets/profile-limbi.jpg" alt="LimbiGames" width="160" height="160" />
</figure>

<h1>LimbiGames</h1>
Expand All @@ -38,48 +38,57 @@ <h1>LimbiGames</h1>
<div id="links">
<div class="link twitch">
<a href="https://www.twitch.tv/limbigames">
<span class="fa-brands fa-twitch"></span>
Twitch
<span class="fa-brands fa-twitch fa-fw"></span>
<span>Twitch</span>
<span class="fa-solid fa-arrow-up-right-from-square"></span>
</a>
<p>Live Lunedì, Martedì, Mercoledì, Giovedì sera, Sabato pomeriggio, Domenica sera.</p>
</div>

<div class="link instagram">
<a href="https://www.instagram.com/limbigames/">
<span class="fa-brands fa-instagram"></span>
Instagram
<span class="fa-brands fa-instagram fa-fw"></span>
<span>Instagram</span>
<span class="fa-solid fa-arrow-up-right-from-square"></span>
</a>
<p>Flex delle mie action figure, e qualche cosa importante di tanto in tanto.</p>
</div>

<div class="link discord">
<a href="https://discord.gg/Bsr4nfUM8u">
<span class="fa-brands fa-discord"></span>
Discord
<span class="fa-brands fa-discord fa-fw"></span>
<span>Discord</span>
<span class="fa-solid fa-arrow-up-right-from-square"></span>
</a>
<p>Per le discussioni un po' più strutturate e le chiacchiere nei canali vocali.</p>
</div>

<div class="link telegram">
<a href="https://t.me/LimbiGames">
<span class="fa-brands fa-telegram"></span>
Gruppo Telegram
<span class="fa-brands fa-telegram fa-fw"></span>
<span>Gruppo Telegram</span>
<span class="fa-solid fa-arrow-up-right-from-square"></span>
</a>
<p>Chat aperta e libera, informale e chill. Il modo migliore per restare sempre in contatto!</p>
</div>

<div class="link telegram">
<a href="https://t.me/LimbiGamesTG">
<span class="fa-brands fa-telegram"></span>
Canale Telegram
<span class="fa-brands fa-telegram fa-fw"></span>
<span>Canale Telegram</span>
<span class="fa-solid fa-arrow-up-right-from-square"></span>
</a>
<p>Niente spam, solo notifiche e comunicazioni importanti.</p>
</div>

<!-- <div class="link youtube">
<a href="">
<span class="fa-brands fa-youtube fa-fw"></span>
<span>YouTube</span>
<span class="fa-solid fa-arrow-up-right-from-square"></span>
</a>
<p>???</p>
</div> -->
</div>
</div>

Expand Down

0 comments on commit 048556b

Please sign in to comment.