samuel-p/samuel-philipp.de
samuel-p/samuel-philipp.de
1
0
Fork 0
Code Issues Pull requests 8 Releases Activity Actions

optimized styles for mobile
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Samuel Philipp 2023-01-11 17:48:49 +01:00
parent fd2c45c8b8
commit ec2eedb93d
2 changed files with 49 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/index.html
View file

@ -74,7 +74,7 @@ title: {{site.title}}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-lg-4">
<ul class="info"> <ul class="info">
<li><span class="first-block">{{site.strings.about.overview.name}}:</span><span <li><span class="first-block">{{site.strings.about.overview.name}}:</span><span
class="second-block">Samuel Philipp</span> class="second-block">Samuel Philipp</span>
@ -89,7 +89,7 @@ title: {{site.title}}
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-8"> <div class="col-lg-8">
<h2>{{site.strings.about.hello}}</h2> <h2>{{site.strings.about.hello}}</h2>
<p>{{site.strings.about.text}}</p> <p>{{site.strings.about.text}}</p>
<ul class="social-icons my-4"> <ul class="social-icons my-4">
@ -197,9 +197,9 @@ title: {{site.title}}
<h1>{{site.strings.skills.title}}</h1> <h1>{{site.strings.skills.title}}</h1>
</div> </div>
</div> </div>
<div class="row mb-4"> <div class="row mb-4 justify-content-center">
{%- for item in site.strings.skills.languages %} {%- for item in site.strings.skills.languages %}
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center"> <div class="col-lg-3 col-md-4 col-6 d-flex justify-content-center">
<div class="circular"> <div class="circular">
<div class="inner"></div> <div class="inner"></div>
<div class="number"><strong>{{item.name}}</strong><span>{{item.percent}}%</span></div> <div class="number"><strong>{{item.name}}</strong><span>{{item.percent}}%</span></div>
@ -217,7 +217,7 @@ title: {{site.title}}
</div> </div>
<div class="row"> <div class="row">
{%- for item in site.strings.skills.technologies %} {%- for item in site.strings.skills.technologies %}
<div class="col-md-6"> <div class="col-md-6 col-12">
<div class="progress-wrap"> <div class="progress-wrap">
<div><span class="name-left">{{item.name}}</span><span class="float-end">{{item.percent}}%</span></div> <div><span class="name-left">{{item.name}}</span><span class="float-end">{{item.percent}}%</span></div>
<div class="progress"> <div class="progress">
@ -238,7 +238,7 @@ title: {{site.title}}
</div> </div>
<div class="row"> <div class="row">
{%- for item in site.strings.interests.list %} {%- for item in site.strings.interests.list %}
<div class="col-md-3 text-center p-3"> <div class="col-lg-3 col-md-6 col-12 text-center p-3">
<a href="{{item.url}}" target="_blank" class="interest interest-{{item.image}}"> <a href="{{item.url}}" target="_blank" class="interest interest-{{item.image}}">
<div class="desc"> <div class="desc">
<h3>{{item.name}}</h3> <h3>{{item.name}}</h3>

56
src/scss/main.scss
View file

@ -1,7 +1,11 @@
$primary: #006269; $primary: #006269;
$secondary: #444; $secondary: #444;
@import "bootstrap/scss/bootstrap-grid";
@import "bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap-reboot";
@import "bootstrap/scss/bootstrap-utilities";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/_breakpoints";
$icomoon-font-path: "../font"; $icomoon-font-path: "../font";
@import "icons/style"; @import "icons/style";
@ -131,6 +135,17 @@ section {
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
&.timeline-heading > div h3 {
display: inline-block;
padding: 7px 15px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
background: #e6e6e6;
border-radius: 4px;
}
&.timeline-unverted { &.timeline-unverted {
text-align: right; text-align: right;
} }
@ -205,17 +220,6 @@ section {
} }
} }
.timeline-heading > div h3 {
display: inline-block;
padding: 7px 15px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
background: #e6e6e6;
border-radius: 4px;
}
.feature-left { .feature-left {
color: #fff !important; color: #fff !important;
text-decoration: none !important; text-decoration: none !important;
@ -529,3 +533,29 @@ footer {
color: #000; color: #000;
} }
} }
@include media-breakpoint-down(md) {
.timeline {
&::before {
left: 10%;
}
li {
&.timeline-heading > div h3 {
display: block;
}
.timeline-badge {
top: 30px;
left: 10%;
}
.timeline-panel {
width: auto;
float: none !important;
margin-left: 20%;
text-align: left;
}
}
}
}