!CNF3.3
+<<<<<<< HEAD
<<<CONST DEBUG=1>>>
+=======
+
+<<<CONST DEBUG=1>>>
+<<<INCLUDE apps/app_defaults.cnf>>>
+>>>>>>> e9c13ae (init)
<<property <VAR>
Please <@< meta_1 >@>, this line is a paragraph.
<@< dynamic_paragraphs >@>
@@ __\
header __\
link __|
+<<<<<<< HEAD
rel = stylesheet
href = ../wsrc/app.css
+=======
+ rel = manifest
+ href = manifest.json
+ __~
+ __/
+ link __|
+ rel = stylesheet
+ href = ../web_sources/root.css
+ __~
+ __/
+ link __|
+ rel = stylesheet
+ href = ../web_sources/app.css
+ __~
+>>>>>>> e9c13ae (init)
__/
__/
__/
<<GenericInstructionHandler<INSTRUCTOR>PROPERTY>>
<<ArticleSample_CSS <PROPERTY>
+<<<<<<< HEAD
+=======
+
+
+
+>>>>>>> e9c13ae (init)
.article{
display: grid;
grid-template-columns: .5fr 1fr;
}
.img{
display: grid;
+<<<<<<< HEAD
grid-template-columns: 1fr;
+=======
+ grid-template-columns: 1fr;
+>>>>>>> e9c13ae (init)
padding: 5px;
# border: solid black 1px;
min-width: min-content;
}
}
+<<<<<<< HEAD
+>>
+
+=======
+@layer base {
+
+ @media (width > 599px) {
+
+ .content>*:nth-child(1) {
+ flex: 1 2 0;
+ margin-left: .2rem;
+ }
+
+ .content>*:nth-child(2) {
+ flex: 0 1 80%;
+ text-align: justify;
+ display: inline-block;
+ overflow: scroll;
+ border-radius: 10px;
+ }
+
+ .content>*:nth-child(3) {
+ flex: 1 2 0;
+ margin-left: .2rem;
+ display: none;
+ }
+ }
+
+
+
+ @media (width > 1440px) {
+
+ .content>*:nth-child(1) {
+ flex: 1 2 .1%;
+ margin-left: .5rem;
+ }
+ .content>*:nth-child(2) {
+ flex: 0 1 90%;
+ margin-left: .1rem;
+ }
+ .content>*:nth-child(3) {
+ flex: 1 2 18%;
+ margin-left: .5rem;
+ display: none;
+ }
+ }
+
+ }
+
>>
+
+>>>>>>> e9c13ae (init)
<<ArticleSample$$ <TREE> __IN_SHORTIFE__ __PRIORITY_2__
article __\
img __\
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title><!--<@< page_title >@>--></title>
+ <link rel="manifest" href="apps/manifest.json" />
+ <link rel="stylesheet" href="../web_sources/root.css" />
+ <link rel="stylesheet" href="../web_sources/app.css" />
+</head>
+
+
+<style>
+
+
+
+.col_section {
+ display: grid;
+ border: solid salmon 1px;
+ border-radius: 10px;
+ overflow-block: scroll;
+
+ align-content: start;
+ align-items: start;
+ justify-items: start;
+ text-align: start;
+
+}
+
+.content>*:nth-child(1) {
+ flex: 1 2 10%;
+ margin-left: .5rem;
+}
+
+.content>*:nth-child(2) {
+ flex: 0 1 85%;
+ text-align: justify;
+ display: inline-block;
+ overflow: scroll;
+ border-radius: 10px;
+}
+
+.content>*:nth-child(3) {
+ flex: 1 2 10%;
+ margin-left: .5rem;
+ /* display: none; */
+}
+
+</style>
+
+<body>
+ <!--PerlCNF Template Start-->
+ <div class="content">
+ <div class="col" role="navigation">
+ <div class="toc"><strong>TOC</strong>
+ <span class="scrolling">
+ <!--<@< col_left >@>-->
+ PerlCNFWebServer
+ </span>
+ </div>
+ </div>
+ <div class="col_main" role="main">
+ <!--<@< col_main >@>-->
+ <h1>Main</h1>
+ <p>Main paragraph sample text.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Facilis perferendis eius fuga dignissimos tempore repellendus aliquid eligendi iste, esse a quidem cum
+ totam deserunt
+ harum accusantium modi similique officiis? Nemo?</p>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus repudiandae, saepe, veritatis eveniet repellat qui ipsa quas possimus iure quae illo! Tenetur libero error dicta non illo, sint porro nihil?</p>
+ <div class="col_section">
+ <h2>Test</h2>
+ <div>
+ <h3>Lorem I</h3>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, sint facere officia aliquid iste amet vel
+ iusto nulla tenetur error porro modi voluptatum reprehenderit! Maiores quidem debitis ex consequuntur
+ aspernatur?</p>
+ </div>
+
+ <div>
+ <h3>Lorem II</h3>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, sint facere officia aliquid iste amet vel
+ iusto nulla tenetur error porro modi voluptatum reprehenderit! Maiores quidem debitis ex consequuntur
+ aspernatur?</p>
+
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab similique quisquam distinctio ut nemo
+ culpa, esse fuga fugit eveniet sint, illum provident consequuntur expedita voluptate veritatis, tenetur quod
+ delectus error?</p>
+ </div>
+
+ <div>
+ <h3>Lorem III</h3>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, sint facere officia aliquid iste amet vel
+ iusto nulla tenetur error porro modi voluptatum reprehenderit! Maiores quidem debitis ex consequuntur
+ aspernatur?</p>
+
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab similique quisquam distinctio ut nemo
+ culpa, esse fuga fugit eveniet sint, illum provident consequuntur expedita voluptate veritatis, tenetur quod
+ delectus error?</p>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga maiores eveniet quaerat maxime aspernatur mollitia
+ modi itaque dolore quis nihil! Hic facilis eum laborum ipsam fugiat reiciendis sunt odio ratione?</p>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga maiores eveniet quaerat maxime aspernatur mollitia
+ modi itaque dolore quis nihil! Hic facilis eum laborum ipsam fugiat reiciendis sunt odio ratione?</p>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga maiores eveniet quaerat maxime aspernatur mollitia
+ modi itaque dolore quis nihil! Hic facilis eum laborum ipsam fugiat reiciendis sunt odio ratione?</p>
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga maiores eveniet quaerat maxime aspernatur mollitia
+ modi itaque dolore quis nihil! Hic facilis eum laborum ipsam fugiat reiciendis sunt odio ratione?</p>
+
+ </div>
+ </div>
+
+ <div class="col_section">
+ <h2>Test</h2>
+ <div>
+ <h3>Lorem II</h3>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat vero accusantium at illo accusamus molestiae
+ numquam eos optio odio quasi esse placeat eveniet, maxime deleniti vel earum mollitia rem quod?</p>
+ </div>
+ </div>
+
+
+
+
+ </div>
+
+ <div class="col" role="contentinfo">
+ <!--<@< col_right >@>-->
+ <p>Right Column!</p>
+ </div>
+ </div>
+ <!--PerlCNF Template End-->
+
+</body>
+
+</html>
\ No newline at end of file