Skip to content

Commit adad42c

Browse files
ItzSelenuxItzSelenux
ItzSelenux
authored and
ItzSelenux
committed
fix page to best working on mobile devices
1 parent 628b542 commit adad42c

2 files changed

Lines changed: 73 additions & 31 deletions

File tree

‎css.css‎

Lines changed: 67 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,6 @@ border-radius: 16px;}
3636
.header
3737
{width: 100%;min-height: 90vh;background: #43A64F;background-position: center;background-size: cover;}
3838

39-
.selogo
40-
{width: 333px; margin: 15% 0 0 60%;}
41-
4239
.weltext
4340
{position: absolute;top: 41%;left: 15%;width: 50%;color: #29382a;flex-direction: column;}
4441
.weltext h1
@@ -54,17 +51,13 @@ color: #f2f2f2;transition: 0.6s;}
5451

5552

5653
.dynabanner
57-
{position: relative;top: 41%;left: 15%;width: 50%;color: #29382a;}
54+
{position: relative;top: 41%;left: 15%;width: 70%;color: #29382a;}
5855
.dynabanner h1
5956
{font-size: 42px;font-weight: bold;color: #1d381f;transition: 0.6s;}
6057
.dynabanner h1:hover
6158
{text-shadow: 0px 0px 40px rgba(10, 10, 10, 0.4);transform: scale(1.02);}
6259
.dynabanner p
6360
{margin-top: 20px;margin-bottom: 30px;font-size: 40px;}
64-
.dynabanner a
65-
{position: relative;display: inline-block;text-decoration: none;border-radius: 20px;
66-
font-size: 20px;font-weight: bold;padding: 8px 25px;background-color: var(--cereus-dark);
67-
color: #f2f2f2;transition: 0.6s;}
6861

6962
.wiki_container
7063
{display: flex;width: 100%;}
@@ -81,20 +74,78 @@ color: #f2f2f2;transition: 0.6s;}
8174
font-size: 20px;font-weight: bold;padding: 8px 25px;background-color: #43a64f;
8275
color: #f2f2f2;transition: 0.6s;}
8376

77+
78+
79+
/*Vertical*/
80+
@media only screen and (max-aspect-ratio: 1/1)
81+
{
82+
body
83+
{overflow-x: hidden;}
84+
.features
85+
{color: #1d381f;display: flex;text-align:
86+
center;justify-content: space-between;flex-direction: column;}
87+
.features li
88+
{list-style-type: none;border-radius: 30px;margin-bottom: 20px;
89+
box-sizing: border-box;background: #43A64F;background-position: center;
90+
background-size: cover;transition: 0.6s;}
91+
.features li:hover
92+
{box-shadow: 0px 0px 30px rgba(67, 166 ,79, 0.32);transform: scale(1.02);}
93+
.features img
94+
{width: 160px;}
95+
.features p
96+
{padding-top: 2vh;font-size: 24px;font-weight: 400;}
97+
98+
.selogo
99+
{width: 30%; margin: 15% 0 0 15%;}
100+
.dynabanner a
101+
{position: relative;display: inline-block;text-decoration: none;border-radius: 20px;
102+
font-size: 20px;font-weight: bold;padding: 8px 25px;background-color: var(--cereus-dark);
103+
color: #f2f2f2;transition: 0.6s; width: 100%; left:-10%}
104+
.dynabanner img
105+
{width:60%}
106+
.depic img
107+
{width:100%}
108+
}
109+
110+
/*Horizontal*/
111+
@media only screen and (min-aspect-ratio: 1/1)
112+
{
113+
.features
114+
{color: #1d381f;min-height: 30%;display: flex;text-align:
115+
center;justify-content: space-between;margin: 5% 0%;margin-top: 2%; flex-direction: row;}
116+
117+
.features li
118+
{list-style-type: none;flex-basis: 32%;border-radius: 30px;margin: 2px 10px;padding: 20px 6px;
119+
box-sizing: border-box;background: #43A64F;background-position: center;
120+
background-size: cover;transition: 0.6s;}
121+
.features li:hover
122+
{box-shadow: 0px 0px 30px rgba(67, 166 ,79, 0.32);transform: scale(1.02);}
123+
.features img
124+
{width: 160px;}
125+
.selogo
126+
{width: 30%; margin: 15% 0 0 60%;}
127+
.dynabanner a
128+
{position: relative;display: inline-block;text-decoration: none;border-radius: 20px;
129+
font-size: 20px;font-weight: bold;padding: 8px 25px;background-color: var(--cereus-dark);
130+
color: #f2f2f2;transition: 0.6s;}
131+
.dynabanner img
132+
{width:30%}
133+
.depic img
134+
{width:100%}
135+
}
136+
84137
.contenido
85-
{width: 95%;margin: auto;}
138+
{width: 90%;margin: auto;}
86139
.intro-contenido
87-
{min-height: 10vh;text-align: center;padding: 6vh 0vh;}
140+
{text-align: center;padding: 6vh 0vh;}
88141
.intro-contenido h1
89-
{font-size: 28px;transition: 0.4s;}
142+
{font-size: 26px;transition: 0.4s;}
90143
.intro-contenido h1:hover
91144
{text-shadow: 0px 0px 20px rgba(67, 166 ,79 , 0.32);transform: scale(1.034);}
92145
.intro-contenido p
93146
{padding-top: 2vh;font-size: 18px;font-weight: 400;}
94147

95-
.features
96-
{color: #1d381f;min-height: 400px;display: flex;text-align:
97-
center;justify-content: space-between;margin: 5% 0%;margin-top: 2%;}
148+
98149
.features h3
99150
{padding-top: 10px;}
100151

@@ -107,15 +158,8 @@ center;justify-content: space-between;margin: 5% 0%;margin-top: 2%;}
107158
{padding-top: 10px;color: #FAFAFA;}
108159
.features-desk p
109160
{padding: 10px 0px; color: #FAFAFA;}
110-
/* --- cards --- */
111-
.features li
112-
{list-style-type: none;flex-basis: 32%;border-radius: 30px;margin: 2px 10px;padding: 20px 6px;
113-
box-sizing: border-box;background: #43A64F;background-position: center;
114-
background-size: cover;transition: 0.6s; }
115-
.features li:hover
116-
{box-shadow: 0px 0px 30px rgba(67, 166 ,79, 0.32);transform: scale(1.02);}
117-
.features img
118-
{width: 160px;}
161+
/* --- cards --- */
162+
119163

120164
/* --- Footer --- */
121165
.footer

‎index.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<!--BANNER-->
2424

2525
<section class="header">
26-
<img class="selogo" src="res/ui/logo.svg" width=333px>
26+
<img class="selogo" src="res/ui/logo.svg">
2727
<div class="weltext">
2828
<h1>Cereus Linux</h1>
2929
<p>A Void Linux based distribution,<br> that focuses in delivering a user-friendly experience.</p>
@@ -56,31 +56,29 @@ <h3>Secure</h3>
5656
<img src="res/ui/secure_icon.svg">
5757
</li>
5858
<li>
59-
<h3>Added software</h3>
59+
<h3>Add software</h3>
6060
<p>Find everything you need in the <a rel="noopener" href="https://sourceforge.net/projects/cereus-linux/files/repos/" target="_blank">Cereus repos</a></p>
6161
<img src="res/ui/repos_icon.svg">
6262
</li>
6363
</ul>
6464
</section>
6565

66-
<!--BANNER-->
67-
6866
<section class="header" id="down" style="background:#0044AA;">
6967
<div class="dynabanner">
7068
<br>
71-
<img src="res/ui/xfcelogo.svg" width="256px">
69+
<img src="res/ui/xfcelogo.svg">
7270
<p style="color:#001f4d;">Lightweight Desktop based on GTK</p>
73-
<a href="https://sourceforge.net/projects/cereus-linux/" target="_blank"><img src="res/DE/xfce.png" width="999px"></a><br><br>
71+
<a class="depic" href="https://sourceforge.net/projects/cereus-linux/" target="_blank"><img src="res/DE/xfce.png" width="100%"></a><br><br>
7472
<a class="dwn" href="downloads.html">Get it now!</a><br><br>
7573
</div>
7674
</section>
7775
<br>
7876
<section class="header" style="background:#268DB3;">
7977
<div class="dynabanner">
8078
<br>
81-
<img src="res/ui/lxqtlogo.svg" width="256px">
79+
<img src="res/ui/lxqtlogo.svg">
8280
<p style="color:#014A6B;">Lightweight Desktop based on GTK</p>
83-
<a href="https://sourceforge.net/projects/cereus-linux/" target="_blank"><img src="res/DE/lxqt.png" width="999px"></a><br><br>
81+
<a class="depic" href="https://sourceforge.net/projects/cereus-linux/" target="_blank"><img src="res/DE/lxqt.png" width="100%"></a><br><br>
8482
<a class="dwn" href="downloads.html">Get it now!</a><br><br>
8583
</div>
8684
</section>

0 commit comments

Comments
 (0)