Primo commit
This commit is contained in:
PicciHud
commit
fbbfad2283
Binary file not shown.
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#2B90D9;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
<g id="Icon">
|
||||
<circle class="st0" cx="512" cy="512" r="512"/>
|
||||
<g>
|
||||
<title>Mastodon icon</title>
|
||||
<path class="st1" d="M750.7,448.1c0-111-72.8-143.6-72.8-143.6c-36.7-16.9-99.7-23.9-165.1-24.5h-1.6
|
||||
c-65.4,0.5-128.4,7.6-165.1,24.5c0,0-72.8,32.5-72.8,143.6c0,25.4-0.5,55.8,0.3,88.1c2.6,108.6,19.9,215.6,120.3,242.2
|
||||
c46.3,12.2,86,14.8,118.1,13.1c58.1-3.2,90.7-20.7,90.7-20.7l-1.9-42.1c0,0-41.5,13.1-88.1,11.5c-46.2-1.6-94.9-5-102.4-61.7
|
||||
c-0.7-5.3-1-10.6-1-15.9c0,0,45.3,11.1,102.7,13.7c35.1,1.6,68-2.1,101.5-6c64.1-7.7,120-47.2,127-83.3
|
||||
C751.6,530.1,750.7,448.1,750.7,448.1z M664.9,591.2h-53.3V460.7c0-27.5-11.6-41.5-34.7-41.5c-25.6,0-38.4,16.6-38.4,49.3V540h-53
|
||||
v-71.5c0-32.8-12.8-49.3-38.4-49.3c-23.1,0-34.7,14-34.7,41.5v130.5h-53.3V456.8c0-27.5,7-49.3,21.1-65.5
|
||||
c14.5-16.2,33.5-24.4,57-24.4c27.3,0,47.9,10.5,61.6,31.4l13.2,22.2l13.3-22.2c13.7-21,34.3-31.4,61.6-31.4
|
||||
c23.5,0,42.5,8.3,57,24.4c14,16.1,21,38,21,65.5L664.9,591.2L664.9,591.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M100 200C155.228 200 200 155.228 200 100C200 44.7715 155.228 0 100 0C44.7715 0 0 44.7715 0 100C0 155.228 44.7715 200 100 200Z" fill="#0DBD8B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M81.7169 46.5946C81.7169 42.5581 84.9959 39.2859 89.0408 39.2859C116.456 39.2859 138.681 61.4642 138.681 88.8225C138.681 92.859 135.401 96.1312 131.357 96.1312C127.312 96.1312 124.033 92.859 124.033 88.8225C124.033 69.5372 108.366 53.9033 89.0408 53.9033C84.9959 53.9033 81.7169 50.6311 81.7169 46.5946Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M153.39 81.5137C157.435 81.5137 160.714 84.7859 160.714 88.8224C160.714 116.181 138.49 138.359 111.075 138.359C107.03 138.359 103.751 135.087 103.751 131.05C103.751 127.014 107.03 123.742 111.075 123.742C130.4 123.742 146.066 108.108 146.066 88.8224C146.066 84.7859 149.345 81.5137 153.39 81.5137Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M118.398 153.405C118.398 157.442 115.119 160.714 111.074 160.714C83.6592 160.714 61.4347 138.536 61.4347 111.177C61.4347 107.141 64.7138 103.869 68.7587 103.869C72.8035 103.869 76.0826 107.141 76.0826 111.177C76.0826 130.463 91.7489 146.097 111.074 146.097C115.119 146.097 118.398 149.369 118.398 153.405Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.6097 118.486C42.5648 118.486 39.2858 115.214 39.2858 111.178C39.2858 83.8193 61.5102 61.6409 88.9255 61.6409C92.9704 61.6409 96.2494 64.9132 96.2494 68.9497C96.2494 72.9862 92.9704 76.2584 88.9255 76.2584C69.6 76.2584 53.9337 91.8922 53.9337 111.178C53.9337 115.214 50.6546 118.486 46.6097 118.486Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M8.93822 25.174C11.7438 23.6286 14.8756 22.3388 17.8018 21.0424C22.836 18.919 27.8902 16.8324 32.9954 14.8898C33.9887 14.5588 35.7734 14.2351 35.9484 15.7071C35.8526 17.7907 35.4584 19.8621 35.188 21.9335C34.5017 26.4887 33.7085 31.0283 32.935 35.5685C32.6685 37.0808 30.774 37.8637 29.5618 36.8959C26.6486 34.9281 23.713 32.9795 20.837 30.9661C19.8949 30.0088 20.7685 28.6341 21.6099 27.9505C24.0093 25.5859 26.5539 23.5769 28.8279 21.0901C29.4413 19.6088 27.6289 20.8572 27.0311 21.2397C23.7463 23.5033 20.5419 25.9051 17.0787 27.8945C15.3097 28.8683 13.2479 28.0361 11.4797 27.4927C9.89428 26.8363 7.57106 26.175 8.93806 25.1741L8.93822 25.174Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="18.0028" y1="2.0016" x2="6.0028" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#37AEE2"/>
|
||||
<stop offset="1" stop-color="#1E96C8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#840010;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
<g id="Icon">
|
||||
<circle class="st0" cx="512" cy="512" r="512"/>
|
||||
<path class="st1" d="M301.6,276.4c-25.2,0-45.6,20.4-45.6,45.6v420.9c0,1.6,0.1,3.2,0.2,4.8c16.9-6.3,34.9-13.2,53.9-20.8
|
||||
c132.2-52.8,240.2-97.6,240.3-148.3c0-1.6-0.1-3.3-0.3-4.9c-6.8-50-126.3-65.5-126.2-88.4c0-1.2,0.4-2.5,1.1-3.8
|
||||
c14.4-25.1,71.2-23.9,92.2-25.7c21-1.8,70.1-1.4,72.5-16.4c0.1-0.5,0.1-0.9,0.1-1.4c0.1-13.9-33.8-19.4-33.8-19.4s41.1,6.1,41,22.1
|
||||
c0,0.8-0.1,1.6-0.3,2.4c-4.4,17.2-40.6,20.4-64.5,21.6c-22.6,1.1-57.1,3.7-57.2,14.8c0,0.6,0.1,1.3,0.3,2
|
||||
c5.4,16.2,131.7,23.9,212.5,65.9c46.5,24.1,69.6,64.6,80.2,106.4V322c0-25.2-20.4-45.6-45.6-45.6L301.6,276.4L301.6,276.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289L19.7071 11.2929C19.8946 11.4804 20 11.7348 20 12C20 12.2652 19.8946 12.5196 19.7071 12.7071L13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071C11.9024 18.3166 11.9024 17.6834 12.2929 17.2929L16.5858 13L5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11L16.5858 11L12.2929 6.70711C11.9024 6.31658 11.9024 5.68342 12.2929 5.29289Z" fill="#0D0D0D"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 583 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M9 2C9.55228 2 10 2.44772 10 3V4H14V3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V4H19C20.1046 4 21 4.89543 21 6V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V6C3 4.89543 3.89543 4 5 4H8V3C8 2.44772 8.44772 2 9 2ZM8 6H5V9H19V6H16V7C16 7.55228 15.5523 8 15 8C14.4477 8 14 7.55228 14 7V6H10V7C10 7.55228 9.55228 8 9 8C8.44772 8 8 7.55228 8 7V6ZM19 11H5V19H19V11Z" fill="#0D0D0D"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 552 B |
|
|
@ -0,0 +1,145 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
|
||||
id="svg1982"
|
||||
version="1.1"
|
||||
viewBox="0 0 83.61702 81.430435"
|
||||
height="81.430435mm"
|
||||
width="83.61702mm"
|
||||
sodipodi:docname="italian_linux_society_penguin_circle_logo.svg">
|
||||
<title
|
||||
id="title822">Linux tux logo</title>
|
||||
<defs
|
||||
id="defs1976" />
|
||||
<sodipodi:namedview
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="50"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-height="1001"
|
||||
inkscape:window-width="1920"
|
||||
fit-margin-bottom="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-top="0"
|
||||
showgrid="false"
|
||||
inkscape:document-rotation="0"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:cy="293.88427"
|
||||
inkscape:cx="88.730707"
|
||||
inkscape:zoom="0.7"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
borderopacity="1.0"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff"
|
||||
id="base" />
|
||||
<metadata
|
||||
id="metadata1979">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>Linux tux logo</dc:title>
|
||||
<cc:license
|
||||
rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
|
||||
<dc:date>2020</dc:date>
|
||||
<dc:creator>
|
||||
<cc:Agent>
|
||||
<dc:title>Italian Linux Society</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:creator>
|
||||
<dc:contributor>
|
||||
<cc:Agent>
|
||||
<dc:title>Created by Roberto Guido (Italian Linux Society), edited by Virginia Foti</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:contributor>
|
||||
<dc:source>https://gitlab.com/ItalianLinuxSociety/Materiali/-/blob/master/images/logo/italian_linux_society_penguin_circle_logo.svg</dc:source>
|
||||
</cc:Work>
|
||||
<cc:License
|
||||
rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
|
||||
</cc:License>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-14.131964,-9.9335951)"
|
||||
id="layer1"
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Livello 1">
|
||||
<g
|
||||
id="g1472"
|
||||
transform="matrix(1.0517572,0,0,1.0517572,-63.133465,-625.8409)">
|
||||
<circle
|
||||
r="5.4800777"
|
||||
cy="290.0127"
|
||||
cx="230.60519"
|
||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle1458"
|
||||
transform="matrix(4.341855,-4.2283153,4.341855,4.2283153,-2147.2331,392.00586)" />
|
||||
<path
|
||||
d="m 217.68787,239.1968 -7.43917,-12.88501 -7.43917,-12.88501 14.87834,0 14.87833,-1e-5 -7.43917,12.88502 z"
|
||||
transform="matrix(1.126521,0,0,1.1065385,-132.01563,410.06176)"
|
||||
inkscape:transform-center-y="4.7526135"
|
||||
inkscape:randomized="0"
|
||||
inkscape:rounded="0"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:arg2="2.6179939"
|
||||
sodipodi:arg1="1.5707963"
|
||||
sodipodi:r2="8.5900087"
|
||||
sodipodi:r1="17.180019"
|
||||
sodipodi:cy="222.01678"
|
||||
sodipodi:cx="217.68787"
|
||||
sodipodi:sides="3"
|
||||
id="path1460"
|
||||
style="fill:#ffa200;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
sodipodi:type="star" />
|
||||
<g
|
||||
transform="matrix(0.84355606,0,0,0.8285929,-80.747652,475.18299)"
|
||||
id="g1470">
|
||||
<circle
|
||||
r="15.404826"
|
||||
cy="197.01552"
|
||||
cx="224.50641"
|
||||
id="circle1462"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.56034;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.0431771,0,0,1.0431771,11.733742,-15.81225)" />
|
||||
<circle
|
||||
r="2.7779195"
|
||||
cy="196.51044"
|
||||
cx="228.04193"
|
||||
id="circle1464"
|
||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3354429,0,0,1.3354429,-66.581532,-72.718648)" />
|
||||
<circle
|
||||
r="15.404826"
|
||||
cy="197.01552"
|
||||
cx="224.50641"
|
||||
transform="matrix(-1.0431771,0,0,1.0431771,448.13363,-15.81225)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.56034;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle1466" />
|
||||
<circle
|
||||
r="2.7779195"
|
||||
cy="196.51044"
|
||||
cx="228.04193"
|
||||
transform="matrix(-1.3354429,0,0,1.3354429,526.4489,-72.718648)"
|
||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle1468" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M12 4.52765C9.64418 2.41689 6.02125 2.49347 3.75736 4.75736C1.41421 7.10051 1.41421 10.8995 3.75736 13.2426L10.5858 20.0711C11.3668 20.8521 12.6332 20.8521 13.4142 20.0711L20.2426 13.2426C22.5858 10.8995 22.5858 7.10051 20.2426 4.75736C17.9787 2.49347 14.3558 2.41689 12 4.52765ZM10.8284 6.17157L11.2929 6.63604C11.6834 7.02656 12.3166 7.02656 12.7071 6.63604L13.1716 6.17157C14.7337 4.60948 17.2663 4.60948 18.8284 6.17157C20.3905 7.73367 20.3905 10.2663 18.8284 11.8284L12 18.6569L5.17157 11.8284C3.60948 10.2663 3.60948 7.73367 5.17157 6.17157C6.73367 4.60948 9.26633 4.60948 10.8284 6.17157Z" fill="#0D0D0D"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 766 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M4 7C4 6.44772 4.44772 6 5 6H19C19.5523 6 20 6.44772 20 7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7ZM4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12ZM4 17C4 16.4477 4.44772 16 5 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H5C4.44772 18 4 17.5523 4 17Z" fill="#0D0D0D"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 519 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
|
||||
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 225 B |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Firefox">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel=" stylesheet" href="./style.css" type="text/css" media="screen">
|
||||
<link rel="icon" type="image/x-icon" href="./Icon/favicon.svg">
|
||||
<!--Favicon-->
|
||||
<title>Articoli</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
|
||||
<!--NAVBAR + LOGO-->
|
||||
|
||||
<div class="title">
|
||||
<h2>#BeOpen</h2>
|
||||
<p>Respect your Freedom</p>
|
||||
<div class="dropdown" style="float:right;">
|
||||
<button class="dropbtn">Menù</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="./index.html">cd ~</a>
|
||||
<a href="./index.html#manifesto">Manifesto</a>
|
||||
<a href="#">Articoli</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--MENÙ-->
|
||||
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="./index.html">cd ~</a></li>
|
||||
<li><a href="./index.html#manifesto">Manifesto</a></li>
|
||||
<li><a href="#">Articoli</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!--LISTA ARTICOLI-->
|
||||
|
||||
<div class="max_spacer"></div>
|
||||
|
||||
<div class="lista_articol">
|
||||
<h2>Indipendeza del Cyberspazio</h2>
|
||||
<div class="border"></div>
|
||||
<p class="piccihud">22-04-2022</p>
|
||||
<p class="tag">#document #freedom #philosophy</p>
|
||||
<p>La Dichiarazione di indipendenza del cyberspazio è stata redatto l'8 febbraio 1996 da <em>John P. Barlow</em>, uno dei fondatori della
|
||||
EFF. La Dichiarazione sostiene la negazione della proprietà di Internet.
|
||||
</p>
|
||||
<a href="./indipendenza_cyberspazio.html" class="read_more">
|
||||
<p>Read more</p> <img src="./Icon/arrow-right.svg" alt="Read more">
|
||||
</a>
|
||||
|
||||
<div class="max_spacer"></div>
|
||||
|
||||
<h2>Breve guida a VIM</h2>
|
||||
<div class="border"></div>
|
||||
<p class="piccihud">13-05-2022</p>
|
||||
<p class="tag">#gnu/linux #text-editor #floss #vim</p>
|
||||
<p>Per quale motivo si dovrebbe utilizzare <em>VIM</em>? Uno su tutti: l'efficienza!</p>
|
||||
<a href="./guida_vim.html" class="read_more">
|
||||
<p>Read more</p> <img src="./Icon/arrow-right.svg" alt="Read more">
|
||||
</a>
|
||||
|
||||
<div class="max_spacer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--FOOTER-->
|
||||
<!--PRIVACY POLICY-->
|
||||
|
||||
<div class="privacy">
|
||||
<p>##Questo sito non fa uso di cookie e non registra dati personali degli utenti.</p>
|
||||
<p>Tutti gli articoli sono senza affiliazioni e senza pubblicità.</p>
|
||||
</div>
|
||||
|
||||
<!--CONTATTI E LICENZA-->
|
||||
|
||||
<div class="container_contacts">
|
||||
<p><b>##Contatti</b></p>
|
||||
<div class="contacts">
|
||||
<div>
|
||||
<a href="https://t.me/davidempic" target="_blank"><img src="./Icon/Contacts/telegram.svg" alt="telegram"> Telegram</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:davidemp.oc12p@simplelogin.co" target="_blank"><img src="./Icon/Contacts/tutanota.svg" alt="mail">Mail</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://mastodon.uno/@PicciHud" target="_blank"><img src="./Icon/Contacts/mastodon.svg" alt="mastodon">Mastodon</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://matrix.to/#/@davidemp:one.ems.host" target="_blank"><img src="./Icon/Contacts/matrix.svg" alt="matrix">Matrix</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="license">
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" title="Condividi allo stesso modo">
|
||||
Questo sito utilizza solo strumenti FLOSS<br>
|
||||
2022 - Quest'opera è distribuita con Licenza CC BY-SA 4.0
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="make">
|
||||
<p>Realizzato con</p>
|
||||
<img src="./Icon/heart.svg" alt="cuore">
|
||||
<p>da PicciHud</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,862 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Firefox">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel=" stylesheet" href="./style.css" type="text/css" media="screen">
|
||||
<link rel="icon" type="image/x-icon" href="./Icon/favicon.svg">
|
||||
<!--Favicon-->
|
||||
<title>Breve guida a VIM</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
|
||||
<!--NAVBAR + LOGO-->
|
||||
|
||||
<div class="title">
|
||||
<h2>#BeOpen</h2>
|
||||
<p>Respect your Freedom</p>
|
||||
<div class="dropdown" style="float:right;">
|
||||
<button class="dropbtn">Menù</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="./index.html">cd ~</a>
|
||||
<a href="./index.html#manifesto">Manifesto</a>
|
||||
<a href="./articoli.html">Articoli</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--MENÙ-->
|
||||
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="./index.html">cd ~</a></li>
|
||||
<li><a href="./index.html#manifesto">Manifesto</a></li>
|
||||
<li><a href="./articoli.html">Articoli</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container_img">
|
||||
<img src="./Img/Guida_vim/vim.jpg" alt="Vim text editor" />
|
||||
</div>
|
||||
|
||||
<!--ARTICOLO PRINCIPALE-->
|
||||
|
||||
<h1 class="titolo_apertura">#Breve guida a VIM</h1>
|
||||
|
||||
<div class="articol">
|
||||
<div class="piccihud">
|
||||
<p>
|
||||
<img src="./Icon/user.svg" alt="">PicciHud
|
||||
<img src="./Icon/calendar.svg" alt="">13-05-2022
|
||||
</p>
|
||||
</div>
|
||||
<p>Non importa se sei un amministratore di sistema o uno sviluppatore di software, se usi il terminale in
|
||||
una distribuzione GNU/Linux, potrà capitare che dovrai utilizzare un editor da riga di comando.</p>
|
||||
<p>Sono disponibili diversi <em>editor di testo da riga di comando</em> e sei libero di usarne uno
|
||||
qualsiasi. Vim è
|
||||
uno degli editor più potenti popolari, installato su qualsiasi distribuzione GNU/Linux. Questo è il
|
||||
motivo per cui
|
||||
imparare le basi di Vim ti aiuterà molto.</p>
|
||||
<p>Ora, questa non è una guida completa per renderti un esperto di Vim. È una guida destinata a fornirti gli
|
||||
strumenti minimi necessari per sopravvivere in Vim.</p>
|
||||
<p>Se non fosse pre-installato nella propria distribuzione GNU/Linux, basta aprire un terminale e, a
|
||||
seconda, digitare il comando specifico per la distro o derivata:</p>
|
||||
|
||||
<div class="container_img">
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fedora</th>
|
||||
<th>Debian</th>
|
||||
<th>Arch</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme"><span class="highlightme">sudo dnf -y install vim</span></td>
|
||||
<td><span class="highlightme"><span class="highlightme">sudo apt -y install vim</span></td>
|
||||
<td><span class="highlightme"><span class="highlightme">sudo pacman -S vim</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p><em>Vim</em>, o Vi IMproved, è un editor di testo libero e multipiattaforma, nato per fornire una
|
||||
versione migliorata di Vi.</p>
|
||||
<p>La sua prima versione è stata scritta nel 1991 da Bram Moolenaar. Attualmente è molto diffuso tra
|
||||
programmatori ed utenti di sistemi operativi unix-like.</p>
|
||||
<p>Da Vi mantiene la caratteristica di essere <em>modale</em>, ovvero di avere modalità diverse nelle quali
|
||||
i normali caratteri della tastiera hanno significato di inserimento testo o di comandi. In questo modo,
|
||||
è
|
||||
possibile usarlo senza far uso del mouse, permettendo una velocità maggiore di scrittura, a prezzo di
|
||||
maggiore difficoltà di apprendimento da parte di nuovi utenti. La tastiera non è così solo uno strumento
|
||||
per
|
||||
digitare testo, ma anche uno strumento per impartire comandi.</p>
|
||||
<p>Vim ha quindi tre modalità:</p>
|
||||
|
||||
<p>- <em>Command mode</em>: quando si avvia Vim, ci si trova in modalità di comando (detta anche
|
||||
<em>normal mode</em>). In questa
|
||||
modalità è possibile spostarsi sullo schermo, eliminare e copiare del testo, ma non possibile scrivere
|
||||
testo;</p>
|
||||
<p>- <em>Insert mode</em>: per inserire del testo in un file, esiste una modalità di inserimento dedicata,
|
||||
chiamata appunto insert mode;</p>
|
||||
<p>- <em>Visual mode</em>: permette di utilizzare i tasti freccia per selezionare il testo su più righe
|
||||
(invece di lavorare direttamente su parole e righe in base alla posizione del cursore, come nella insert
|
||||
mode).</p>
|
||||
|
||||
<p>Uno dei vantaggi di avere una modalità comando distinta dall'inserimento del testo vero e proprio
|
||||
risiede nel fatto che più operazioni di modifica possono essere fatte mediante una sola riga della
|
||||
tastiera senza dover premere contemporaneamente i tasti Alt, Ctrl o altri modificatori, cosa che riduce
|
||||
il numero
|
||||
di tasti da premere.</p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h2>Comandi base</h2>
|
||||
<p>Vediamo ora alcuni comandi di base per spostarsi tra le varie modalità dell'editor.</p>
|
||||
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme"><span class="highlightme">I</span></td>
|
||||
<td>Entrare nella Insert mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme"><span class="highlightme">ESC</span></td>
|
||||
<td>Uscire da qualsiasi modalità</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme"><span class="highlightme">v</span></td>
|
||||
<td>Entrare nella Visual mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:</span></td>
|
||||
<td>Entrare nella Command mode</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Entrare nella modalità inserimento</h2>
|
||||
<p>Ci sono diversi modi per entrare in modalità inserimento. Elenchiamo quelli principali.</p>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">I</span></td>
|
||||
<td>Modalità inserimento, porta il cursore ad inizio riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">a</span></td>
|
||||
<td>Modalità inserimento dopo l'ultima lettera, pronto per scrivere</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">A</span></td>
|
||||
<td>Modalità inserimento, porta il cursore alla fine della riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">o</span></td>
|
||||
<td>Modalità inserimento, crea una nuova riga dopo la riga corrente</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">O</span></td>
|
||||
<td>Modalità inserimento, crea una nuova riga prima della riga corrente</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Muoversi nella normal mode</h2>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">h</span></td>
|
||||
<td>Spostare il cursore verso sinistra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">j</span></td>
|
||||
<td>Spostare il cursore verso il basso</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">k</span></td>
|
||||
<td>Spostare il cursore verso l'alto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">l</span></td>
|
||||
<td>Spostare il cursore verso destra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">SHIFT+G</span></td>
|
||||
<td>Sposta il cursore alla fine del file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">]]</span></td>
|
||||
<td>Sposta il cursore alla fine del file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">gg</span></td>
|
||||
<td>Sposta il cursore all'inizio del file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">[[</span></td>
|
||||
<td>Sposta il cursore all'inizio del file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">w</span></td>
|
||||
<td>Sposta il cursore alla parola successiva</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">b (before)</span></td>
|
||||
<td>Sposta il cursore alla parola precedente</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">e</span></td>
|
||||
<td>(end) Sposta il cursore al termine della parola successiva</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">$</span></td>
|
||||
<td>Sposta il cursore a fine riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">0</span></td>
|
||||
<td>Sposta il cursore a inizio riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">^</span></td>
|
||||
<td>Sposta il cursore a inizio riga, senza contare eventuali spazi</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">(</span></td>
|
||||
<td>Sposta il cursore all'inizio della frase</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">)</span></td>
|
||||
<td>Sposta il cursore alla fine della frase</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">{</span></td>
|
||||
<td>Sposta il cursore all'inizio del paragrafo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">}</span></td>
|
||||
<td>Sposta il cursore alla fine del paragrafo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">H</span></td>
|
||||
<td>Sposta il cursore alla prima riga del viewport</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">M</span></td>
|
||||
<td>Sposta il cursore alla metà del viewport</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">L</span></td>
|
||||
<td>Sposta il cursore alla fine del viewport</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">nG</span></td>
|
||||
<td>Sposta il cursore alla n-esima riga</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">nw</span></td>
|
||||
<td>Sposta il cursore alla n-esima parola successiva</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">e</span></td>
|
||||
<td>Sposta il cursore al termine di una parola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">b</span></td>
|
||||
<td>Sposta il cursore all’inizio della parola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:nriga</span></td>
|
||||
<td>Sposta il cursore alla riga indicata</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Salvataggio e uscita</h2>
|
||||
<p>Ecco la lista dei comandi base per salvare il documento ed uscire da Vim.</p>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">:w</span></td>
|
||||
<td>Salva il file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:q!</span></td>
|
||||
<td>Esce da Vim, ma senza salvare il file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:wq</span></td>
|
||||
<td>Salva il file ed esce da Vim</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Ricerca di testo</h2>
|
||||
<p>Durante la scrittura, ricercare del testo è fondamentale. In Vim può essere fatto molto semplicemente.
|
||||
</p>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">/parola</span></td>
|
||||
<td>Spostare il cursore alla prima occorrenza della parola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">?parola</span></td>
|
||||
<td>Spostare il cursore all'ultima occorrenza della parola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">flettera</span></td>
|
||||
<td>Spostare il cursore sulla lettera ricercata nella riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">tlettera</td>
|
||||
<td>Spostare il cursore prima della lettera ricercata</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Se fosse presente più di una corrispondenza, è possibile passare alla parola successiva premendo il tasto
|
||||
<span class="highlightme">n</span> oppure alla precedente premendo il tasto <span class="highlightme">N</span>.
|
||||
</p>
|
||||
<p>Suggerimento: l'opzione <spa class="highlightme">\c</spa> esegue una ricerca senza distinzione tra
|
||||
maiuscole e minuscole.</p>
|
||||
<p>Esempio: <span class="highlightme">/\cLa_mia_ricerca</span></p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h2>Cerca e sostituisci</h2>
|
||||
Molte volte, dopo aver ricercato del testo, è utile sostituire le occorrenze corrispondenti.
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">:%s/foo/bar/g</span></td>
|
||||
<td>Sostituisce tutte le ricorrenze di 'foo' con 'bar'. L'opzione 'g' alla fine è responsabile
|
||||
della sostituzione di tutte le corrispondenze trovate. In caso contrario, verrebbe
|
||||
sostituita solo
|
||||
la prima corrispondenza</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:s/foo/bar/g</span></td>
|
||||
<td>Eseguirà esattamente la stessa funzione di cui sopra, ma solo nella riga corrente
|
||||
anziché nell'intero file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:%s/foo/bar/gci</span></td>
|
||||
<td>Per impostazione predefinita, la ricerca fa distinzione tra maiuscole e minuscole. Per
|
||||
non fare distinzione, si può usare il flag 'i' insieme a 'g'. Con l'opzione 'c' viene
|
||||
richiesta la conferma, al fine di evitare sostituzioni indesiderate</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Con l'opzione <em>conferma</em>, verranno presentate la seguenti opzioni:</p>
|
||||
|
||||
<p><span class="trattino">- </span>y: SÌ, sostituisci questa corrispondenza;</p>
|
||||
<p><span class="trattino">- </span>n: NO, non sostituire questa corrispondenza e passa a quella successiva;
|
||||
</p>
|
||||
<p><span class="trattino">- </span>a: Sostituisci TUTTE le corrispondenze;</p>
|
||||
<p><span class="trattino">- </span>q: ESCI senza sostituire alcuna corrispondenza;</p>
|
||||
<p><span class="trattino">- </span>l: Sostituisci questa corrispondenza ed esci, come se fosse l'ULTIMA
|
||||
corrispondenza;</p>
|
||||
<p><span class="trattino">- </span>^E: Scorri lo schermo verso l'alto;</p>
|
||||
<p><span class="trattino">- </span>^Y: Scorri lo schermo verso il basso;</p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h2>Cancellazione</h2>
|
||||
<p>In Vim, buona pratica è non cancellare il testo in modalità inserimento, come si farebbe con qualsiasi
|
||||
editor, ma operare in Normal mode, sempre per aumentare la velocità di esecuzione.</p>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">u</span></td>
|
||||
<td>Annulla la modifica</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">^r</span></td>
|
||||
<td>Ripristino della modifica</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">x</span></td>
|
||||
<td>Cancella il carattere singolo su cui si trova il cursore</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">X</span></td>
|
||||
<td>Elimina il carattere prima della posizione corrente del cursore, come il tasto backspace
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">d</span></td>
|
||||
<td>Cancella la parte di testo evidenziata</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">dw</span></td>
|
||||
<td>Delete word, dalla posizione del cursore</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">daw</span></td>
|
||||
<td>Delete a word. Cancella un'intera parola, indipendentemente dalla posizione del cursore
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">diw</span></td>
|
||||
<td>Delete inner word. Cancella un'intera parola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">cw</span></td>
|
||||
<td>Change word (in automatico, cancella la parola ed entra in Insert mode)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">di"</span></td>
|
||||
<td>Delete inner (dentro) "" o qualsiasi delimitatore venga specificato</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">ci"</span></td>
|
||||
<td>Change inner "". Elimina il contenuto ed entra in Insert mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">dd</span></td>
|
||||
<td>Cancella un'intera riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">dit</span></td>
|
||||
<td>Delete inner tag (come i tag html)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">cit</span></td>
|
||||
<td>Change inner tag (ed entra in Insert Mode)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">das</span></td>
|
||||
<td>Delete a sentence (cancella una frase intera)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">dap</span></td>
|
||||
<td>Cancella un paragrafo intero</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">d0</span></td>
|
||||
<td>Cancella dalla posizione corrente del cursore a inizio riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">d$</span></td>
|
||||
<td>Cancella dalla posizione corrente del cursore a fine riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">dG</span></td>
|
||||
<td>Cancella dalla posizione corrente del cursore fino alla fine del file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">d/parola</span></td>
|
||||
<td>Cancella dalla posizione del cursore alla parola</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Copia/incolla</h2>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">yy</span></td>
|
||||
<td>Copia un'intera riga</td>
|
||||
<tr>
|
||||
<td><span class="highlightme">yw</span></td>
|
||||
<td>Copia una parola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">y$</span></td>
|
||||
<td>Copia dalla posizione corrente del cursore fino alla fine della riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">yG</span></td>
|
||||
<td>Copia dalla posizione corrente del cursore fino alla fine del file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">p</span></td>
|
||||
<td>Paste. Incolla il contenuto del buffer dopo la posizione del cursore (il contenuto
|
||||
cancellato resta in memoria e può essere incollato)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">P</span></td>
|
||||
<td>Incolla il contenuto del buffer dopo la posizione del cursore</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">r</span></td>
|
||||
<td>Replace. Sostituisce una singola lettera, tornando immediatamente in Normal mode</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Trasformazione in maiuscolo (o minuscolo)</h2>
|
||||
<p>Semplice e immediato è trasformare il testo in maiuscolo o minuscolo.</p>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">guw</span></td>
|
||||
<td>Parola in minuscolo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">gUw</span></td>
|
||||
<td>Parola in maiuscolo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">gUU</span></td>
|
||||
<td>Tutta la riga in maiuscolo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">guu</span></td>
|
||||
<td>Tutta la riga in minuscolo</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Selezionare il testo in Visual mode</h2>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">v</span></td>
|
||||
<td>Seleziona carattere per carattere</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">V</span></td>
|
||||
<td>Seleziona un'intera riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">SHIFT+J</span></td>
|
||||
<td>Unisce più righe selezionate</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Creazione di macro</h2>
|
||||
In Vim è possibile registrare una sequenza di comandi e poi eseguirli in automatico!
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">no</span></td>
|
||||
<td>Scrivere n righe contemporaneamente</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">qlettera</span></td>
|
||||
<td>Inizio registrazione macro. Es.: qa - tutti i comandi digitati successivamente saranno
|
||||
registrati</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">q</span></td>
|
||||
<td>Termine della macro</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">@lettera</span></td>
|
||||
<td>Viene eseguita la macro</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Criptare file txt</h2>
|
||||
Non è solo possibile salvare un file, bensì pure criptarlo, per una maggior sicurezza.
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">vim -x file.txt</span></td>
|
||||
<td>Da terminale, crea un file, specificando una password di cifratura</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:X</span></td>
|
||||
<td>Cambiare la password. Se il campo viene lasciato vuoto, anche nella conferma, la
|
||||
password viene cancellata e il file non è più cifrato</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:set cm=blowfish2</span></td>
|
||||
<td>Livello di cifratura massima disponibile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">set cm=blowfish2</span></td>
|
||||
<td>Per rendere il massimo livello di cifratura come parametro di default, creare o
|
||||
modificare il file.vimrc, all'interno della home directory, con la precedente istruzione
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Altri comandi utili</h2>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">CTRL+a</span></td>
|
||||
<td>Aumenta di un'unità il primo numero di una riga (3^a -> aumenta di 3 unità il numero)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">.</span></td>
|
||||
<td>Ripete il comando precedente (dw -> Il '.' ripete poi il comando)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:set number</span></td>
|
||||
<td>Indicazione numero riga</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">:set nonumber/number!</span></td>
|
||||
<td>Numero riga non visibile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">numero+comando</span></td>
|
||||
<td>Il comando viene ripetuto n volte</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">>></span></td>
|
||||
<td>Tabulazione a destra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme"><<</span></td>
|
||||
<td>Tabulazione a sinistra</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Controllo ortografico in Vim</h2>
|
||||
<p>La prima cosa da sapere è come attivare il controllo ortografico o <em>spellcheck</em>.</p>
|
||||
<p>In command line, digitare:</p>
|
||||
<p><span class="highlightme">:set spell spelllang=it</span></p>
|
||||
<p>È possibile attivare più lingue contemporaneamente:</p>
|
||||
<p><span class="highlightme">:set spell spelllang=it,en_US</span></p>
|
||||
<p>In tal modo il sistema di correzione rileverà gli errori nella lingua italiana ed anche in quella
|
||||
inglese (americana), non evidenziando come errate le parole in inglese.</p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h3>Attivare e disattivare il controllo ortografico</h3>
|
||||
<p>Il controllo ortografico è comodo, ma a volte è piacevole poterlo disattivare ed attivare velocemente.
|
||||
</p>
|
||||
<p><span class="highligthme">:set spell</span></p>
|
||||
<p>per attivare il controllo ortografico</p>
|
||||
<p><span class="hightligthme">:set no spell</span></p>
|
||||
<p>per disattivalo.</p>
|
||||
<p>Nota a margine: in molti casi il modo per attivare o disattivare un comando in Vim è quello di
|
||||
anteporre al comando stesso il termine chiave <span class="highlightme">no</span>.</p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h3>Correggere il testo in <em>Normal Mode</em></h3>
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="highlightme">[s</span></td>
|
||||
<td>Sposta il cursore alla prima parola errata a sinistra</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="highlightme">s]</span></td>
|
||||
<td>Sposta il cursore alla prima parola errata a destra</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Per parola errata Vim considera sia gli errori di scrittura (una parola che non viene trovata nel
|
||||
vocabolario italiano di Vim) sia errori sintattici (che Vim visualizza in blu), come ad esempio una
|
||||
parola che,
|
||||
all’inizio di un nuovo periodo, non inizia con la maiuscola.</p>
|
||||
<p>La variante di questo comando più specifica, permette di passare solo tra le parole sbagliate (quelle
|
||||
che non vengono trovate nel vocabolario di Vim) è <span class="highlightme">[S</span> e <span class="highlightme">]S</span>.</p>
|
||||
<p>Per correggere la parola errata basta digitare:</p>
|
||||
<p><span class="highlightme">z=</span></p>
|
||||
<p>Comparirà ora una schermata con le possibili parole corrette; a tali parole sarà anteposto un numero.
|
||||
Sarà quindi sufficiente digitare il numero della parola corretta,
|
||||
premere invio e Vim procederà a sostituirla.</p>
|
||||
|
||||
<div class="container_img">
|
||||
<img src="./Img/Guida_vim/menu_errore_vim.png" alt="Vim text editor" style="margin:0 0 -30px 0;" />
|
||||
</div>
|
||||
|
||||
<h3>Aggiungere parole al vocabolario di Vim</h3>
|
||||
<p>Può capitare, e spesso capita, che una determinata parola, casomai specialistica della nostra materia,
|
||||
venga visualizzata da Vim come errore perché non presente
|
||||
nel vocabolario.</p>
|
||||
<p>Nessun problema, possiamo inserire una parola nel nostro vocabolario, posizionandoci su di essa e
|
||||
digitando
|
||||
<span class="highlightme">zg</span>zg
|
||||
</p>
|
||||
<p>Se volete inserire velocemente una parola nel vocabolario:</p>
|
||||
<p><span class="highlightme">:spe {parola da aggiungere}</span></p>
|
||||
<p>Se volete che una parola risulti come non corretta basterà digitare:
|
||||
<span class="highlightme">zw</span> (w sta per wrong, sbagliato).
|
||||
</p>
|
||||
<p>Se volete inserire velocemente una parola come errata:</p>
|
||||
<p><span class="highlightme">:spellw {parola da aggiungere}</span></p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h3>Correggere il testo in <em>Insert mode</em></h3>
|
||||
<p>Sulla parola errata digitare:</p>
|
||||
<p><span class="highlightme">^X</span> quindi <span class="highlightme">s</span></p>
|
||||
<p>Si aprirà un menù a finestra con le possibili parole corrette. Per scegliere dal menù a tendina usate la
|
||||
combinazione di tasti CTRL+N (next) oppure CTRL+P (previous).</p>
|
||||
|
||||
<div class="container_img">
|
||||
<img src="./Img/Guida_vim/menu_contestuale_correzione_errori.png" alt="Vim text editor" style="margin:0 0 -30px 0;" />
|
||||
</div>
|
||||
|
||||
<h3>Auto-completamento</h3>
|
||||
<p>Digitando CTRL+X, in insert mode, si accede a molto di più del sistema di
|
||||
correzione degli errori. È possibile procedere all'auto-completamento delle parole che si stanno
|
||||
digitando.</p>
|
||||
<p>Dopo aver digitato CTRL+X, invece di s è possibile digitare:</p>
|
||||
|
||||
<p><span class="trattino">- </span>CTRL+L, per il completamento dell’intera linea (completa con frasi simili
|
||||
a quelle scritte precedentemente; utile se si è un programmatore);</p>
|
||||
<p><span class="trattino">- </span>CTRL+N, per il completamento con parole del documento (utile soprattutto
|
||||
per nomi o parole complesse che si usano abbondantemente nel file);</p>
|
||||
<p><span class="trattino">- </span>CTRL+K, per il completamento con parole del dizionario.</p>
|
||||
|
||||
<br>
|
||||
<p>Un articolo a parte sarà dedicato ai <em>plugin</em> e alla loro installazione.</p>
|
||||
</div>
|
||||
|
||||
<div class="container_img">
|
||||
<img src="./Img/Guida_vim/vim_meme.png" alt="Vim or Emacs" />
|
||||
</div>
|
||||
|
||||
<!--FOOTER-->
|
||||
<div class="spacer"></div>
|
||||
<div class="footer">
|
||||
<h2>#Note</h2>
|
||||
<p>-<a href="https://www.vim.org/" target="_blank">Sito ufficiale Vim</a></p>
|
||||
<p>-<a href="https://wiki.froth.zone/wiki/Vi_(software)?lang=it" target="_blank">Vi - Wikipedia</a></p>
|
||||
<p>-<a href="https://wiki.archlinux.org/title/Vim">Vim - ArchWiki [ENG]</a></p>
|
||||
<p>-<a href="https://wiki.froth.zone/wiki/Vim_(editor_di_testo)?lang=it" target="_blank">Vim - Wikipedia</a>
|
||||
</p>
|
||||
<p>-<a href="https://linuxhandbook.com/basic-vim-commands/" target="_blank">Comandi base di Vim</a></p>
|
||||
<p>-<a href="https://linuxhandbook.com/vim-modes/" target="_blank">Modalità di Vim</a></p>
|
||||
<p>-<a href="https://www.avvocati-e-mac.it" target="_blank">Guide su Vim in italiano</a></p>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<h2>#Video</h2>
|
||||
<p>-<a href="https://invidious.snopyta.org/watch?v=JLAi_siifRY" target="_blank">I principali comandi di Vim
|
||||
[ITA]</a></p>
|
||||
<p>-<a href="https://invidious.snopyta.org/playlist?list=PLGiPYQa6t79pXJ9M_ciVhpo4Qkw0vq_7N" target="_blank">Vim e approfondimenti [ITA]</a></p>
|
||||
</div>
|
||||
|
||||
<!--PRIVACY POLICY-->
|
||||
|
||||
<div class="privacy">
|
||||
<p>##Questo sito non fa uso di cookie e non registra dati personali degli utenti.</p>
|
||||
<p>Tutti gli articoli sono senza affiliazioni e senza pubblicità.</p>
|
||||
</div>
|
||||
|
||||
<!--CONTATTI E LICENZA-->
|
||||
|
||||
<div class="container_contacts">
|
||||
<p><b>##Contatti</b></p>
|
||||
<div class="contacts">
|
||||
<div>
|
||||
<a href="https://t.me/davidempic" target="_blank"><img src="./Icon/Contacts/telegram.svg" alt="telegram"> Telegram</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:davidemp.oc12p@simplelogin.co" target="_blank"><img src="./Icon/Contacts/tutanota.svg" alt="mail">Mail</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://mastodon.uno/@PicciHud" target="_blank"><img src="./Icon/Contacts/mastodon.svg" alt="mastodon">Mastodon</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://matrix.to/#/@davidemp:one.ems.host" target="_blank"><img src="./Icon/Contacts/matrix.svg" alt="matrix">Matrix</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="license">
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" title="Condividi allo stesso modo">
|
||||
Questo sito utilizza solo strumenti FLOSS<br>
|
||||
2022 - Quest'opera è distribuita con Licenza CC BY-SA 4.0
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="make">
|
||||
<p>Realizzato con</p>
|
||||
<img src="./Icon/heart.svg" alt="cuore">
|
||||
<p>da PicciHud</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Firefox">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css" type="text/css" media="screen">
|
||||
<link rel="icon" type="image/x-icon" href="./Icon/favicon.svg">
|
||||
<!--Favicon-->
|
||||
<title>BeOpen - Homepage</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
<!--Immagine di sfondo-->
|
||||
<div class="container_home">
|
||||
<div class="hero center">
|
||||
<!--Per gli allineamenti. Più classi-->
|
||||
<h1>BeOpen</h1>
|
||||
<p>Respect your Freedom</p>
|
||||
<div class="divider"></div>
|
||||
<a href="#manifesto" class="button">Manifesto</a>
|
||||
<a href="./articoli.html" class="button">Articoli</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider" id="manifesto"></div>
|
||||
<main class="spacer">
|
||||
<div class="articol">
|
||||
<h1 class="titolo_apertura">#Manifesto BeOpen</h1>
|
||||
<h2>##La libertà non esiste senza una vera scelta</h2>
|
||||
|
||||
<div class="divider"></div>
|
||||
<blockquote>“Se vuoi, sei libero”. <a href="https://it.wikipedia.org/wiki/Epitteto" target="_blank"><em></em>Epitteto</em></a> </blockquote>
|
||||
<div class="divider"></div>
|
||||
|
||||
<p>Viviamo in un mondo che si è rapidamente spogliato di uno dei valori fondamentali: la <em>libertà di scelta</em>.
|
||||
La libertà non esiste senza una vera scelta, che deve essere consapevole e non subita.</p>
|
||||
<p>Questo vale anche per un'ampia sfera che sta diventando sempre più parte della nostra vita quotidiana: i dispositivi mobile.
|
||||
Questi spesso non sono progettati pensando ai nostri migliori interessi, ma tuttavia occupano un posto centrale nelle nostre vite. Il mercato mobile è dominato da poche
|
||||
grandi aziende, che ci consentono di utilizzare i loro servizi e ci rendono dipendenti da essi, in cambio dei nostri dati, della nostra privacy e del nostro tempo.</p>
|
||||
<p>Credo fermamente in un mondo aperto, trasparente e sicuro. Un mondo in cui puoi scegliere quale piattaforma desideri utilizzare, indipendentemente dall'hardware che acquisti.
|
||||
Un mondo dove puoi scegliere se condividere i tuoi dati, come e con chi, senza fare concessioni. Un mondo in cui ci sia libertà di scelta a tutti i livelli e in ogni ambito.</p>
|
||||
<p>Un mondo libero.</p>
|
||||
<p>Questo blog nasce proprio con questo intento: proporre e consigliare alternative etiche, libere e rispettose dell'utente.
|
||||
Conterrà recensioni, guide, opinioni e consigli su software FLOSS e piattaforme analoghe, ma non solo:
|
||||
qua e là si tratterà anche di filosofia, cinema e letteratura.</p>
|
||||
|
||||
<div class="divider"></div>
|
||||
<p>Alcuni punti guida:</p>
|
||||
<p><span class="trattino">- </span>Tutto il sito è e sarà sempre creato utilizzando strumenti liberi ed aperti, compreso il SO (GNU/Linux);</span></p>
|
||||
<p><span class="trattino">- </span>nessuna dipendenza o framework proprietario è contenuto nel codice Html e Css, ma tutto è stato scritto a mano (coi limiti dell'autore) ed è disponibile su GitLab;</span></p>
|
||||
<p><span class="trattino">- </span>niente cookie né componenti di terze parti o di analitica sono contenuti nel codice. Su questo sito il proprietario dei tuoi dati sei tu!</span></p>
|
||||
|
||||
|
||||
<p>Il progetto riguarda la diffusione dell’idea stessa di libertà, in qualsiasi ambito.</p>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!--FOOTER-->
|
||||
<!--PRIVACY POLICY-->
|
||||
|
||||
<div class="privacy">
|
||||
<p>##Questo sito non fa uso di cookie e non registra dati personali degli utenti.</p>
|
||||
<p>Tutti gli articoli sono senza affiliazioni e senza pubblicità.</p>
|
||||
</div>
|
||||
|
||||
<!--CONTATTI E LICENZA-->
|
||||
|
||||
<div class="container_contacts">
|
||||
<p><b>##Contatti</b></p>
|
||||
<div class="contacts">
|
||||
<div>
|
||||
<a href="https://t.me/davidempic" target="_blank"><img src="./Icon/Contacts/telegram.svg" alt="telegram"> Telegram</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:davidemp.oc12p@simplelogin.co" target="_blank"><img src="./Icon/Contacts/tutanota.svg" alt="mail">Mail</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://mastodon.uno/@PicciHud" target="_blank"><img src="./Icon/Contacts/mastodon.svg" alt="mastodon">Mastodon</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://matrix.to/#/@davidemp:one.ems.host" target="_blank"><img src="./Icon/Contacts/matrix.svg" alt="matrix">Matrix</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="license">
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" title="Condividi allo stesso modo">
|
||||
Questo sito utilizza solo strumenti FLOSS<br>
|
||||
2022 - Quest'opera è distribuita con Licenza CC BY-SA 4.0
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="make">
|
||||
<p>Realizzato con</p>
|
||||
<img src="./Icon/heart.svg" alt="cuore">
|
||||
<p>da PicciHud</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Firefox">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css" type="text/css" media="screen">
|
||||
<link rel="icon" type="image/x-icon" href="./Icon/favicon.svg">
|
||||
<!--Favicon-->
|
||||
<title>BeOpen - BeFree</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div class="title">
|
||||
<h2>#BeOpen</h2>
|
||||
<p>Respect your Freedom</p>
|
||||
<div class="dropdown" style="float:right;">
|
||||
<button class="dropbtn">Menù</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="./index.html">cd ~</a>
|
||||
<a href="./index.html#manifesto">Manifesto</a>
|
||||
<a href="./articoli.html">Articoli</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href="./index.html">cd ~</a></li>
|
||||
<li><a href="./index.html#manifesto">Manifesto</a></li>
|
||||
<li><a href="./articoli.html">Articoli</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container_img">
|
||||
<img src="./Img/Indipendenza_cyberspazio/tron.webp" alt=" Pictures of John Barlow EFF" />
|
||||
</div>
|
||||
|
||||
<h1 class="titolo_apertura">#Indipendenza del Cyberspazio</h1>
|
||||
|
||||
<div class="articol">
|
||||
<h2 class="sottotitolo">##John Perry Barlow</h2>
|
||||
<div class="piccihud">
|
||||
<p>
|
||||
<img src="./Icon/user.svg" alt="">PicciHud
|
||||
<img src="./Icon/calendar.svg" alt="">22-04-2022
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p> <em>Governi del Mondo, stanchi giganti di carne e di acciaio, io vengo dal Cyberspazio, la nuova dimora
|
||||
della
|
||||
Mente. A nome del futuro, chiedo a voi, esseri del passato, di lasciarci soli. Non siete graditi
|
||||
fra di noi. Non avete alcuna sovranità sui luoghi dove ci incontriamo.</em></p>
|
||||
<p>Noi non abbiamo alcun governo eletto, è anche probabile che non ne avremo alcuno, così mi rivolgo a voi
|
||||
con
|
||||
una autorità non più grande di quella con cui la libertà stessa, di solito, parla. Io dichiaro che lo
|
||||
spazio
|
||||
sociale globale che stiamo costruendo è per sua natura indipendente dalla tirannia che voi volete
|
||||
imporci.
|
||||
Non avete alcun diritto morale di governarci e non siete in possesso di alcun metodo di costrizione che
|
||||
noi
|
||||
ragionevolmente possiamo temere.</p>
|
||||
<p>I Governi ottengono il loro potere dal consenso dei loro sudditi. Non ci avete chiesto né avete ricevuto
|
||||
il
|
||||
nostro. Noi non vi abbiamo invitati. Voi non ci conoscete e non conoscete neppure il nostro mondo. Il
|
||||
Cyberspazio non si trova all'interno dei vostri confini.</p>
|
||||
<p>Non pensate che esso si possa costruire come se fosse il progetto di un edifico pubblico. Non potete. È
|
||||
un
|
||||
atto di natura e si sviluppa per mezzo delle nostre azioni collettive. Non siete stati coinvolti nelle
|
||||
nostre grandi e partecipate discussioni e non avete creato il valore dei nostri mercati. Voi non
|
||||
conoscete
|
||||
la nostra cultura, la nostra etica, e nemmeno i codici non scritti che danno alla nostra società più
|
||||
ordine
|
||||
di quello che potrebbe essere ottenuto dalle vostre imposizioni.</p>
|
||||
<p>Voi affermate che ci sono problemi fra di noi che hanno necessità di essere risolti da voi. Voi usate
|
||||
questa
|
||||
affermazione come un pretesto per invadere le nostre aree. Molti di questi problemi non esistono.
|
||||
Troveremo
|
||||
i conflitti reali e le cose che non vanno e li affronteremo con i nostri mezzi. Stiamo costruendo il
|
||||
nostro
|
||||
Contratto Sociale.</p>
|
||||
<p>Questo potere si svilupperà secondo le condizioni del nostro mondo, non del vostro. Il nostro mondo è
|
||||
differente.</p>
|
||||
|
||||
<p>Il Cyberspazio è fatto di transazioni, di relazioni, e di pensiero puro disposti come un'onda
|
||||
permanente nella ragnatela delle nostre comunicazioni. Il nostro è un mondo che si trova
|
||||
contemporaneamente dappertutto e da nessuna parte, ma non è dove vivono i nostri corpi.</p>
|
||||
<p>Stiamo creando un mondo in cui tutti possano entrare senza privilegi o pregiudizi basati sulla
|
||||
razza, sul potere economico, sulla forza militare o per diritto acquisito.</p>
|
||||
<p>Stiamo creando un mondo in cui ognuno in ogni luogo possa esprimere le sue idee, senza pregiudizio
|
||||
riguardo al fatto che siano strane, senza paura di essere costretto al silenzio o al conformismo.
|
||||
</p>
|
||||
<p>I vostri concetti di proprietà, espressione, identità, movimento e contesto non si applicano a noi. Essi
|
||||
si
|
||||
basano sulla materia. Qui non c'è materia. Le nostre identità non hanno corpo, così, diversamente da
|
||||
voi,
|
||||
non possiamo arrivare all'ordine tramite la coercizione fisica. Noi crediamo che il nostro potere
|
||||
emergerà
|
||||
dall'etica, dal nostro interesse personale illuminato, dal mercato comune. Le nostre identità possono
|
||||
essere
|
||||
distribuite attraverso molte delle vostre giurisdizioni. L'unica legge che le nostre culture costituenti
|
||||
riconosceranno in modo diffuso sarà la Regola d'Oro. Sulla base di essa speriamo di essere capaci di
|
||||
adottare soluzioni specifiche. Non possiamo però accettare le soluzioni che state cercando di imporre.
|
||||
</p>
|
||||
<p>Negli USA abbiamo creato un legge, il 'Telecommunications Reform Act', che è in contrasto con la nostra
|
||||
Costituzione e reca insulto ai sogni di Jefferson, Washington, Mill, Madison, DeToqueville e Brandeis.
|
||||
Questi sogni adesso devono rinascere in noi.</p>
|
||||
<p>Siete terrorizzati dai vostri figli, poiché sono nati in un mondo che vi considererà sempre immigranti.
|
||||
Poiché li temete, affidate alle vostre burocrazie le responsabilità di genitori che siete troppo codardi
|
||||
per
|
||||
confrontare con voi stessi. Nel nostro mondo tutti i sentimenti e le espressioni di umanità, dalla più
|
||||
semplice a quella più angelica, sono parti di un tutto senza confini, il colloquio globale dei bits. Non
|
||||
possiamo separare l'aria che soffoca dall'aria spostata dalle ali.</p>
|
||||
<p>In Cina, Germania, Francia, Russia, Singapore, Italia e Stati Uniti, state cercando di tener lontano il
|
||||
virus della libertà erigendo posti di guardia ai confini del Cyberspazio. Questi potranno
|
||||
controllare il contagio per un po' di tempo, ma poi non potrà funzionare in un mondo in cui i bits si
|
||||
insinueranno dappertutto.
|
||||
</p>
|
||||
<p>Le vostre industrie dell'informazione, diventando obsolete, cercano di perpetuarsi proponendo leggi, in
|
||||
America e altrove, che affermano di possedere facoltà di parola in ogni parte del mondo. Queste leggi
|
||||
dichiarano che le idee sono dei prodotti industriali, meno preziosi della ghisa. Nel nostro mondo, tutte
|
||||
le
|
||||
creazioni della mente umana possono essere riprodotte e distribuite infinitamente a costo zero. La
|
||||
convenienza globale del pensiero non ha più bisogno delle vostre industrie.</p>
|
||||
<p>Queste misure sempre più ostili e coloniali ci mettono nella stessa posizione di quegli antichi amanti
|
||||
della
|
||||
libertà e dell'autodeterminazione che furono costretti a rifiutare l'autorità di poteri distanti e poco
|
||||
informati. Noi dobbiamo dichiarare le nostre coscienze virtuali immuni dalla vostra sovranità, anche se
|
||||
continuiamo a permettervi di governare i nostri corpi. Noi ci espanderemo attraverso il Pianeta in modo
|
||||
tale
|
||||
che nessuno potrà fermare i nostri pensieri.</p>
|
||||
<p>Noi creeremo nel Cyberspazio una civiltà della Mente. Possa essa essere più umana e giusta di quel
|
||||
mondo che i vostri governi hanno costruito finora.</p>
|
||||
|
||||
<p class="author"><b class="eff">John Perry Barlow<br>
|
||||
Davos, Switzerland<br>
|
||||
February 8, 1996
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container_img">
|
||||
<img src="./Img/Indipendenza_cyberspazio/barlow2.webp" alt=" Pictures of John Barlow EFF" />
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<h2>#Note</h2>
|
||||
<p>-<a href="http://www.antiarte.it/eugius/indipendenza_cyberspazio.htm">Fonte della traduzione</a>
|
||||
</p>
|
||||
<p>-<a href="https://www.eff.org/cyberspace-independence">Testo originale</a></p>
|
||||
<p>-<a href="https://it.wikipedia.org/wiki/John_Perry_Barlow">John Barlow - Wikipedia</a></p>
|
||||
</div>
|
||||
|
||||
<div class="privacy">
|
||||
<p>##Questo sito non fa uso di cookie e non registra dati personali degli utenti.</p>
|
||||
<p>Tutti gli articoli sono senza affiliazioni e senza pubblicità.</p>
|
||||
</div>
|
||||
|
||||
<div class="container_contacts">
|
||||
<p><b>##Contatti</b></p>
|
||||
<div class="contacts">
|
||||
<div>
|
||||
<a href="https://t.me/davidempic" target="_blank"><img src="./Icon/Contacts/telegram.svg" alt="telegram"> Telegram</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:davidemp.oc12p@simplelogin.co" target="_blank"><img src="./Icon/Contacts/tutanota.svg" alt="mail">Mail</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://mastodon.uno/@PicciHud" target="_blank"><img src="./Icon/Contacts/mastodon.svg" alt="mastodon">Mastodon</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://matrix.to/#/@davidemp:one.ems.host" target="_blank"><img src="./Icon/Contacts/matrix.svg" alt="matrix">Matrix</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="license">
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.it" target="_blank" title="Condividi allo stesso modo">
|
||||
Questo sito utilizza solo strumenti FLOSS<br>
|
||||
2022 - Quest'opera è distribuita con Licenza CC BY-SA 4.0
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="make">
|
||||
<p>Realizzato con</p>
|
||||
<img src="./Icon/heart.svg" alt="cuore">
|
||||
<p>da PicciHud</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,688 @@
|
|||
@font-face {
|
||||
font-family: "PecitaBook";
|
||||
src: url(./Font/Pecita.otf);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/*BODY E TESTO*/
|
||||
|
||||
body {
|
||||
background-color: #21202c;
|
||||
font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.32px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.titolo_apertura {
|
||||
font-size: 48px;
|
||||
margin: 50px 0 20px 0;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sottotitolo {
|
||||
text-align: left;
|
||||
margin: 0px 0 30px 0;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #ee6ef1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.highlightme {
|
||||
background-color: #7f0d8333;
|
||||
/*sfondo opaco*/
|
||||
color: #ee6ef1;
|
||||
padding: 3px 3px 3px 3px;
|
||||
font-size: 0.9em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.trattino {
|
||||
color: #ee6ef1;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.max_spacer {
|
||||
padding: 45px 0
|
||||
}
|
||||
|
||||
/*Creare uno spazio superiore tra i vari contenitori*/
|
||||
|
||||
/*LOGO BEOPEN*/
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin: 20px 0 0 auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.title p:hover {
|
||||
color: #4dafff;
|
||||
}
|
||||
|
||||
.title h2 {
|
||||
/*margin: 30px 0 -20px 15px;*/
|
||||
font-size: 60px;
|
||||
color: #ee72f1;
|
||||
font-weight: bold;
|
||||
font-family: "PecitaBook";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/*NAVBAR*/
|
||||
|
||||
nav {
|
||||
width: 80%;
|
||||
margin: 60px auto;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
/*Elimina i pallini*/
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav li {
|
||||
font-size: 24px;
|
||||
/*text-transform: uppercase;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
width: 0px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
transition: .3s;
|
||||
/*3 decimi*/
|
||||
}
|
||||
|
||||
nav li:hover::after {
|
||||
width: 100%;
|
||||
background: #ee6ef1;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ee6ef1;
|
||||
}
|
||||
|
||||
/*DROPDOWN MENÙ*/
|
||||
|
||||
.dropbtn {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
|
||||
color: #fff;
|
||||
border: 2px solid #800d83;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: #21202c;
|
||||
min-width: 160px;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #181a1b;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #800d83;
|
||||
;
|
||||
}
|
||||
|
||||
/*AUTORE E DATA*/
|
||||
|
||||
.piccihud {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.piccihud p {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/*allinea al centro verticalmente*/
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size: 15px;
|
||||
color: #a39b8f;
|
||||
}
|
||||
|
||||
.piccihud img {
|
||||
margin: 10px 10px 10px 10px;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
-webkit-filter: invert(.75);
|
||||
/*Inversione del colore*/
|
||||
}
|
||||
|
||||
/*CORPO - ARTICOLO*/
|
||||
|
||||
.articol,
|
||||
.footer {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.container_img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.container_img img {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.author {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
/*FOOTER*/
|
||||
|
||||
.footer {
|
||||
margin: 15px auto 15px auto;
|
||||
}
|
||||
|
||||
.footer a,
|
||||
h1 {
|
||||
color: #4dafff;
|
||||
}
|
||||
|
||||
.footer h2 {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*PRIVACY*/
|
||||
|
||||
.privacy {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
color: #ee6ef1;
|
||||
margin: 15px auto 15px auto;
|
||||
font-size: 15px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
/*CONTATTI - LICENZA*/
|
||||
|
||||
.container_contacts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container_contacts p {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
font-size: 18px;
|
||||
color: #a39b8f;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
background-color: #181a1b;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
padding: 50px 0px 20px 0px;
|
||||
/*
|
||||
padding: 25px 50px 75px 100px;
|
||||
-top padding is 25px
|
||||
-right padding is 50px
|
||||
-bottom padding is 75px
|
||||
-left padding is 100px
|
||||
*/
|
||||
line-height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.contacts p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contacts a {
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: lighter;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.contacts a:hover {
|
||||
color: #ee6ef1;
|
||||
}
|
||||
|
||||
.contacts img {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.license,
|
||||
.container,
|
||||
.license a {
|
||||
background-color: #181a1b;
|
||||
text-align: center;
|
||||
padding: 0px 0px 5px 0px;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: #a39b8f;
|
||||
}
|
||||
|
||||
/*REALIZZATO DA...*/
|
||||
|
||||
.make {
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.make img:hover {
|
||||
background-color: red;
|
||||
border-radius: 5px;
|
||||
-webkit-filter: none;
|
||||
}
|
||||
|
||||
.make img {
|
||||
margin: 0 10px 0 10px;
|
||||
width: 18px;
|
||||
height: auto;
|
||||
-webkit-filter: invert(.75);
|
||||
/*Inversione del colore*/
|
||||
}
|
||||
|
||||
/*---------------------------------------------------------------------------*/
|
||||
|
||||
/*MEDIA QUERY - 1080PX*/
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
|
||||
/*IMMAGINE CENTRATA - RESPONSIVE*/
|
||||
.container_img img {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.articol,
|
||||
.footer {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*MEDIA QUERY - 768PX*/
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
/*MENÙ VISIBILE*/
|
||||
.dropbtn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*LOGO BEOPEN*/
|
||||
.title {
|
||||
justify-content: space-evenly;
|
||||
margin: 20px 0 0px 0;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*NAVBAR*/
|
||||
|
||||
nav ul {
|
||||
justify-content: space-evenly;
|
||||
margin: 15px 0 -50px 0;
|
||||
}
|
||||
|
||||
nav li {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.max_spacer {
|
||||
padding: 25px 0
|
||||
}
|
||||
|
||||
.titolo_apertura {
|
||||
width: 100%;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.sottotitolo {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.articol,
|
||||
.footer,
|
||||
.privacy {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.privacy {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.container_img img {
|
||||
width: 95%;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contacts a {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.license {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.make {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*TABELLE*/
|
||||
|
||||
.styled-table {
|
||||
border-collapse: collapse;
|
||||
margin: 25px 0;
|
||||
font-size: 0.9em;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.styled-table thead tr {
|
||||
background-color: #800d83;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.styled-table th,
|
||||
.styled-table td {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.styled-table tbody tr {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.styled-table tbody tr:nth-of-type(even) {
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.styled-table tbody tr:last-of-type {
|
||||
border-bottom: 2px solid #800d83;
|
||||
}
|
||||
|
||||
/*---------------------------------------------------------------------------*/
|
||||
|
||||
/*HOMEPAGE*/
|
||||
|
||||
/*TEXT*/
|
||||
|
||||
blockquote {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-style: italic;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
blockquote a {
|
||||
font-style: normal;
|
||||
color: #ee6ef1;
|
||||
margin: 0 0 0 -15px;
|
||||
}
|
||||
|
||||
/*ASSET*/
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container_home {
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/*BUTTON*/
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
padding: 18px 30px;
|
||||
border: 2px solid #800d83;
|
||||
transition: .3s;
|
||||
color: #fff;
|
||||
margin: 0 0 50px 0;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.inverse {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #800d83;
|
||||
}
|
||||
|
||||
.inverse:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*MAIN*/
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(./Img/Index/home6.jpg) no-repeat center center scroll;
|
||||
/*Immagine come background della navbar*/
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/*Verticalmente*/
|
||||
height: 100vh;
|
||||
/*Al centro del vh*/
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 100px;
|
||||
padding: 15px 0;
|
||||
color: #ee72f1;
|
||||
font-weight: bold;
|
||||
font-family: "PecitaBook";
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/*PAGE -MAIN*/
|
||||
|
||||
main {
|
||||
min-height: 768px;
|
||||
}
|
||||
|
||||
/*---------------------------------------------------------------------------*/
|
||||
|
||||
/*LISTA ARTICOLI*/
|
||||
|
||||
.border {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
border-color: #800d83;
|
||||
border-style: dashed;
|
||||
max-width: 100%;
|
||||
border-width: 3px;
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
|
||||
.lista_articol {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
|
||||
}
|
||||
|
||||
.lista_articol p {
|
||||
color: #a39b8f;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lista_articol h2 {
|
||||
color: #ee6ef1;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.lista_articol .piccihud {
|
||||
color: #ee6ef1;
|
||||
}
|
||||
|
||||
.lista_articol .tag {
|
||||
color: #696969;
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.read_more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10px 10px 0 0;
|
||||
justify-content: left;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.read_more img {
|
||||
-webkit-filter: invert(.99);
|
||||
width: 20px;
|
||||
height: auto;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.read_more p {
|
||||
color: #ee6ef1;
|
||||
}
|
||||
|
||||
.read_more p:hover,
|
||||
.lista_articol h2:hover {
|
||||
color: #fff;
|
||||
}
|
||||
Loading…
Reference in New Issue