ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 20:35:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Center play buttons

Browse source
This commit is contained in:
Thomas Smith 2023-02-08 16:54:12 -05:00
parent 14a6b5c2c7
commit a663fa8ea4
3 changed files with 48 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/layouts/index.html
View file

@ -152,6 +152,11 @@
margin-right: 5px; margin-right: 5px;
} }
#hero-terminal-content{
min-height: 0px !important;
max-height: none !important;
}
.terminal{ .terminal{
height: auto; height: auto;
min-height: 40%; min-height: 40%;
@ -303,7 +308,9 @@
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<code id="terminal-output-2"> <code id="terminal-output-2">
{{- partial "play-btn" -}} <div style="margin-top: 15%;">
{{- partial "play-btn.html" -}}
</div>
</code> </code>
</div> </div>
</div> </div>
@ -476,7 +483,9 @@ Created next project successfully
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<code id="terminal-output-3"> <code id="terminal-output-3">
<div style="margin-top: 15%;">
{{- partial "play-btn.html" -}} {{- partial "play-btn.html" -}}
</div>
</code> </code>
</div> </div>
</div> </div>
@ -555,7 +564,9 @@ EOF
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<code id="terminal-output-4"> <code id="terminal-output-4">
<div style="margin-top: 15%;">
{{- partial "play-btn.html" -}} {{- partial "play-btn.html" -}}
</div>
</code> </code>
</div> </div>
</div> </div>
@ -620,6 +631,26 @@ EOF
position: fixed; position: fixed;
width: 100%; width: 100%;
} }
@media only screen and (max-width: 768px) {
.feature-terminal{
width: 100%;
min-height: 250px;
border: 2px solid gray;
background-color: #1a1a1a;
border-radius: 10px;
box-shadow: 0px 10px 18px #121212;
animation: float 3s ease-in-out infinite;
}
.terminal-content{
height: 250px;
}
}
@media only screen and (min-width: 768px) {
.terminal-content{
overflow-y: auto;
min-height:400px;
max-height: 400px;
}
.feature-terminal{ .feature-terminal{
width: 100%; width: 100%;
min-height: 400px; min-height: 400px;
@ -629,10 +660,6 @@ EOF
box-shadow: 0px 10px 18px #121212; box-shadow: 0px 10px 18px #121212;
animation: float 3s ease-in-out infinite; animation: float 3s ease-in-out infinite;
} }
.terminal-content{
overflow-y: auto;
min-height:400px;
max-height: 400px;
} }
.speed-terminal{ .speed-terminal{
width: 100%; width: 100%;
@ -745,8 +772,6 @@ EOF
margin-right: auto; margin-right: auto;
} }
</style> </style>
<div> <div>

2
src/layouts/partials/hero-terminal-animation.html
View file

@ -10,7 +10,7 @@
<div class="traffic-light"></div> <div class="traffic-light"></div>
</div> </div>
<div class="p-xl-5 p-lg-5 p-md-3 p-sm-3 p-3"> <div class="p-xl-5 p-lg-5 p-md-3 p-sm-3 p-3">
<div class="terminal-content"> <div class="terminal-content" id="hero-terminal-content">
<code id="terminal-output"></code> <code id="terminal-output"></code>
<p id="terminal-input"></p> <p id="terminal-input"></p>
</div> </div>

1
src/layouts/partials/play-btn.html
View file

@ -22,7 +22,6 @@
align-items: center; align-items: center;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
margin-top: 100px;
position: relative; position: relative;
} }