added multiple columns subpage + styling
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
* updated deploy script and hyperlinks accordingly
This commit is contained in:
parent
b1947bbaa4
commit
df44f1d083
GPG Key ID:
19CE1EC1D9E0486D
@ -525,3 +525,34 @@ pre {
|
|||||||
margin: 0 6em;
|
margin: 0 6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#divmultiplecolumns {
|
||||||
|
text-align: left;
|
||||||
|
border: 2px dashed whitesmoke;
|
||||||
|
border-bottom-style: none;
|
||||||
|
border-right-style: none;
|
||||||
|
min-height: 100px;
|
||||||
|
margin: 1em 3em 2em;
|
||||||
|
padding: 1em 0 1em;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
-webkit-column-width: 100px;
|
||||||
|
-moz-column-width: 100px;
|
||||||
|
column-width: 100px;
|
||||||
|
-webkit-column-gap: .1em;
|
||||||
|
-moz-column-gap: .1em;
|
||||||
|
column-gap: .1em;
|
||||||
|
-webkit-column-rule: .1em dashed gainsboro;
|
||||||
|
-moz-column-rule: .1em dashed gainsboro;
|
||||||
|
column-rule: .1em dashed gainsboro;
|
||||||
|
}
|
||||||
|
#divmultiplecolumns p {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
#divmultiplecolumns{
|
||||||
|
-webkit-column-count: 1;
|
||||||
|
-moz-column-count: 1;
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
1
deploy
1
deploy
@ -10,6 +10,7 @@ mkdir -pv ../tew_0x00/public
|
|||||||
rsync -av index.html scripts css media \
|
rsync -av index.html scripts css media \
|
||||||
roundedcorners backgroundgradient shadows \
|
roundedcorners backgroundgradient shadows \
|
||||||
2Dtransforms 3Dtransforms transitions animations \
|
2Dtransforms 3Dtransforms transitions animations \
|
||||||
|
multiplecolumns \
|
||||||
../tew_0x00/public
|
../tew_0x00/public
|
||||||
|
|
||||||
if [ $USER = $USR ]; then
|
if [ $USER = $USR ]; then
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
<li><a href="/3Dtransforms/">3D transforms</a></li>
|
<li><a href="/3Dtransforms/">3D transforms</a></li>
|
||||||
<li><a href="/transitions/">transitions</a></li>
|
<li><a href="/transitions/">transitions</a></li>
|
||||||
<li><a href="/animations/">animations</a></li>
|
<li><a href="/animations/">animations</a></li>
|
||||||
<li><a href="#">multiple columns</a></li>
|
<li><a href="/multiplecolumns/">multiple columns</a></li>
|
||||||
<li><a href="#">box sizing</a></li>
|
<li><a href="#">box sizing</a></li>
|
||||||
<li><a href="#">flexbox</a></li>
|
<li><a href="#">flexbox</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
71
multiplecolumns/index.html
Normal file
71
multiplecolumns/index.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||||
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||||
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||||
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>multiple columns - tew-0x00</title>
|
||||||
|
<meta name="description" content="multiple columns - tew-0x00">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script defer src="/scripts/prism.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/prism.css" data-noprefix/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="divlogoimg">
|
||||||
|
<img class="logoimg" src="/media/logo.png">
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<h3 class="title">multiple columns</h3>
|
||||||
|
<div id="divsection">
|
||||||
|
<p>Utilizing large screen estate with the help of CSS multiple columns layout allow us to increase the eye comfort of the reader by splitting longer lines of text into easier-to-read shorter lines.<br>The other option would be using shorter lines and not utilizing the screen fully, which might come into play in mobile devices with screens small enough to fit exactly one short column on them.</p>
|
||||||
|
<p><br>Below is a div splitting text into 2 columns on screens larger than 768px (usually desktop or laptop screens), melding back into a single-column layout on smaller (mobile) screens.<br>The text is justified left in this case because I like it more that way in this kind of layout. I also used a column divider called <code class="language-css">column-rule</code> in CSS to embelish the column visual a little.</p>
|
||||||
|
<div id="divmultiplecolumns">
|
||||||
|
<p>Temporibus officiis sit quo id. Excepturi eum sed sint quo aperiam accusantium quam nemo. Quibusdam non quo sed sunt nihil dolore aliquid quos.</p>
|
||||||
|
<p>Quos et ducimus distinctio similique laudantium sed. Enim nobis quasi sit sapiente qui nihil. Dolore quibusdam rem libero facilis veritatis aut animi quidem. Officia hic sunt quis et sed laudantium.</p>
|
||||||
|
<p>Et id deserunt corrupti. Voluptatem nihil at voluptatem et tempore exercitationem. Doloremque maiores dicta atque. Expedita laborum quia placeat.</p>
|
||||||
|
</div>
|
||||||
|
<div class="divcodeblock">
|
||||||
|
<pre><code class="language-css">#divmultiplecolumns {
|
||||||
|
text-align: left;
|
||||||
|
border: 2px dashed whitesmoke;
|
||||||
|
border-bottom-style: none;
|
||||||
|
border-right-style: none;
|
||||||
|
min-height: 100px;
|
||||||
|
margin: 1em 3em 2em;
|
||||||
|
padding: 1em 0 1em;
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
-webkit-column-width: 100px;
|
||||||
|
-moz-column-width: 100px;
|
||||||
|
column-width: 100px;
|
||||||
|
-webkit-column-gap: .1em;
|
||||||
|
-moz-column-gap: .1em;
|
||||||
|
column-gap: .1em;
|
||||||
|
-webkit-column-rule: .1em dashed gainsboro;
|
||||||
|
-moz-column-rule: .1em dashed gainsboro;
|
||||||
|
column-rule: 1px dashed gainsboro;
|
||||||
|
}
|
||||||
|
#divmultiplecolumns p {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
#divmultiplecolumns{
|
||||||
|
-webkit-column-count: 1;
|
||||||
|
-moz-column-count: 1;
|
||||||
|
column-count: 1;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="copyright">
|
||||||
|
© 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
|
||||||
|
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>
|
||||||
|
· WTFPL<br>
|
||||||
|
<a href="https://git.dotya.ml/wanderer/TEW-0x00" target="_blank" title="page source">source</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user