perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: perso:new_banner
Branches Tags
perso:master perso:cv_dev_content perso:language_by_sections perso:language perso:chrome_version perso:old_css perso:project_content perso:new_layout perso:mouses_in_css perso:new_banner perso:simple_html perso:ascii_css perso:html_framework
..
compare: perso:new_layout
Branches Tags
perso:master perso:cv_dev_content perso:language_by_sections perso:language perso:chrome_version perso:old_css perso:project_content perso:new_layout perso:mouses_in_css perso:new_banner perso:simple_html perso:ascii_css perso:html_framework

8 Commits
new_banner ... new_layout

Author SHA1 Message Date
asus
9302e725db small fix in hero layout for space on top 2024-05-17 11:59:09 +02:00
asus
c9150faa52 layout ok on firefox 2024-05-17 11:38:17 +02:00
asus
f5c7b07aad cv pudated 2024-05-15 22:53:24 +02:00
asus
4f5cd77c81 - removed nav 
- moved cv to the hero section
- also changed it to collapse all at once instead of by sub titles
- and changed grid to auto flow instead of using named areas
 2024-05-15 19:28:57 +02:00
asus
f042247cbb animation mouse in css is working 2024-05-15 15:49:48 +02:00
asus
b517d26ece index modified for merge 2024-05-15 11:55:24 +02:00
asus
668aad3c59 merging conflict 2024-05-15 11:50:31 +02:00
asus
ac1d84fc9a reverted last 3 commits 2024-01-21 12:16:30 +01:00
28 changed files with 594 additions and 828 deletions
Expand all files Collapse all files

34
README.md
View File

File diff suppressed because one or more lines are too long

29
docs/banners/banner_0.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

30
docs/banners/banner_00.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

1
styles/img/banner_1.svg → docs/banners/banner_1.svg
View File

@@ -29,4 +29,3 @@
<!-- Other SVG elements and attributes --> <!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

1
styles/img/banner_2.svg → docs/banners/banner_2.svg
View File

@@ -32,4 +32,3 @@
<!-- Other SVG elements and attributes --> <!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

1
styles/img/banner_3.svg → docs/banners/banner_3.svg
View File

@@ -35,4 +35,3 @@
<!-- Other SVG elements and attributes --> <!-- Other SVG elements and attributes -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
styles/img/banner_4.svg → docs/banners/banner_4.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
styles/img/banner_5.svg → docs/banners/banner_5.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
docs/hugo_lamy_cv.pdf Normal file
View File

Binary file not shown.

44
docs/mouses/mouse_1/mouse_1_1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
downloads/hugo_lamy_2023_cv.pdf
View File

Binary file not shown.

416
index.html
View File

@@ -33,18 +33,9 @@
--> -->
<body id="body"> <body id="body">
<main id="top"> <div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
<!--
NAV
<nav>
<a href="#top">accueil</a>
<a href="#projects">projets</a>
<a href="#cv">cv</a>
<a href="#infos">contact</a>
</nav>
-->
<!-- <!--
@@ -70,97 +61,56 @@
</h1> </h1>
<h1 aria-label="programmeur informatique" id="title" class="title"> <h1 aria-label="programmeur informatique" id="title" class="title">
<span aria-hidden="true" class="pre"> <span aria-hidden="true" class="pre">
                        
                                   
                 
                   
                             
</span>                
<span aria-hidden="true" class="pre">            
              
                  
                  
                   
               
</span> </span>
</h1> </h1>
<p class="subtitle">méthodique, inventif, curieux</p>
</header> </header>
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art"> <details class="cv margin_top_big">
<pre class="frame f1" aria-hidden="true"> <summary>
<h2 class="close">voir le CV</h2>
   <h2 class="open">cacher le CV</h2>
      </summary>
       <a id="cv_download" href="docs/hugo_lamy_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">télécharger en pdf</a>
          <h2>COMPÉTENCES</h2>
       <ul>
     <li>Langages : C, C++, JavaScript, PHP, CSS, HTML, bash</li>
     <li>Technologies : Node.js, Git, Gitaction, Docker, Wordpress, Nginx, MariaDB, Nest.js, Svelte, WebSocket, Express, npm, react, emails, sending emails, receiving emails, deleting emails</li>
     </ul>
      <h2>EXPIÉRIENCES</h2>
         <ul>
         <li><a href="https://www.carteprof.org" target="_blank" rel="noopener noreferrer" title="link to carteprof website"></a>, 2021 : Backend, plugin wordpress, authentification, sessions, paiements, roles et bdd</li>
      <li><a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer" title="link to bloc-house website"></a>, 2021 : Full-stack, reprise d’un site en php et javascript</li>
      <li><a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer" title="link to lejourdesprofs website"></a>, 2022 : Backend, plugin WordPress API GoogleMaps</li>
    <li><a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer" title="link to kosmopolit website"></a>, 2021 : Front-end, intégration en css atomique statique</li>
    </ul>
</pre> <h2>FORMATION INFORMATIQUE</h2>
<pre class="frame f2" aria-hidden="true"> <ul>
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10 (C, C++, système, algorithime, réseaux)</li>
  <li>SIMPLON, développeur full-stack JavaScript, 2018 (Javascript, Node.js, React.js, HTML, CSS)</li>
     </ul>
       <h2>FORMATION ARCHITECTURE</h2>
        <ul>
       <li>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014</li>
      <li>3 stages : PERSPECTIVA (Houston, Texas, 2009, 3 mois), AS (Paris, 2012, 6 mois), JC QUINTON (Paris 2014, 6 mois)</li>
      </ul>
     <h2>ENGAGEMENT ASSOCIATIF</h2>
      <ul>
         <li>Vulgarisation et recherche contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2024</li>
         <li>Aide au logement, travail, administratif, et projets de vie de personnes précaires, 2018-2024</li>
      <li>Distribution de nourriture, MIGRANTS-WILSON & SECOURS POPULAIRE, 2020-2022</li>
      <li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
    </ul>
    </details>
</pre>
<pre class="frame f3" aria-hidden="true"> <div class="mouse"><div class="mouse_1"></div></div>
<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
 
    
      
       
      
     
     
    
     
        
        
     
     
   
   
</pre>
<pre class="frame f4" aria-hidden="true">
  
     
      
         
      
    
    
    
     
        
        
     
     
   
   
</pre>
</div>
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -205,81 +155,8 @@
</figure> </figure>
</article> </article>
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_2"></div></div>
<pre class="frame f1" aria-hidden="true"> <div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
 
  
  
 

 
 
 
 
   
   
 
    
   
 
</pre>
<pre class="frame f2" aria-hidden="true">
 
  
  
 

 
 
 
 
   
   
 
    
   

</pre>
<pre class="frame f3" aria-hidden="true">
 
 
  
 

 
 
 
 
   
   
 
    
   
 
</pre>
<pre class="frame f4" aria-hidden="true">

 
  
 

 
 
 
 
   
   
 
    
   

</pre>
</div>
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
@@ -292,7 +169,6 @@
<!-- <!--
CV CV
-->
<section id="cv" class="section"> <section id="cv" class="section">
<header> <header>
@@ -308,135 +184,13 @@
</header> </header>
<article> <article>
<h2 id="cv_download"><a href="downloads/hugo_lamy_2023_cv.pdf" target="_blank" rel="noopener noreferrer" title="link to a pdf version of this section CV">version pdf</a></h2>
<details>
<summary>
<h3>Outils informatiques</h3>
</summary>
<ul>
<li>Langages : C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
<li>Technologies : Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
<li>Plus : emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
</ul>
</details>
<details>
<summary>
<h3>Projets informatique</h3>
</summary>
<ul>
<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer" title="link to bloc-house website"></a>, 2021</li>
<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer" title="link to lejourdesprofs website"></a>, 2022</li>
<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer" title="link to kosmopolit website"></a>, 2021</li>
</ul>
</details>
<details>
<summary>
<h3>Formations informatique</h3>
</summary>
<ul>
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10 (C, C++, système, algorithime, réseaux)</li>
<li>SIMPLON, développeur full-stack JavaScript, 2018 (Javascript, Node.js, React.js, HTML, CSS)</li>
</ul>
</details>
<details>
<summary>
<h3>Bénévolat</h3>
</summary>
<ul>
<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
</ul>
</details>
<details>
<summary>
<h3>Études d’architecture</h3>
</summary>
<ul>
<li>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014</li>
<li>Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)</li>
</ul>
</details>
<details>
<summary>
<h3>Centres d'intérêts</h3>
</summary>
<ul>
<li>Vélo : longs voyages à vélo, construction de vélos retro-directs</li>
<li>Magie : cartes, pièces, scène</li>
<li>Autonomie : recherche des moyens de vivre avec le minimum d'affaires</li>
</ul>
</details>
</article> </article>
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_3"></div></div>
<pre class="frame f1" aria-hidden="true">
 
  

  
  
   
   
  
  
   
  
 
</pre>
<pre class="frame f2" aria-hidden="true">
 
  

  
  
   
   
 
  
   
  
 
</pre>
<pre class="frame f3" aria-hidden="true">
 
  

  
  
   
   
  
  
   
  
 
</pre>
<pre class="frame f4" aria-hidden="true">

  
 
  
   
  
  
   
   
   
   
 
</pre>
</div>
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div> <div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
</section> </section>
-->
@@ -454,79 +208,11 @@
<p>hugogogo@protonmail.com</p> <p>hugogogo@protonmail.com</p>
</article> </article>
<div class="frames_container mouse" id="mouse_4" role="img" aria-label="mouse animated in ASCII art"> <div class="mouse"><div class="mouse_4"></div></div>
<pre class="frame f1" aria-hidden="true">
 
 
   
     
     
   
   
  
   
  
 
</pre>
<pre class="frame f2" aria-hidden="true">
 
 
   
    
     
   
   
  
   
 
 
</pre>
<pre class="frame f3" aria-hidden="true">
 
  
   
    
     
   
   
  
   
 
 
</pre>
<pre class="frame f4" aria-hidden="true">
 
  
   
     
     
   
   
  
   
  
 
</pre>
</div>
<div class="banner">
</div>
</section> </section>
</main>
</body> </body>
</html> </html>

263
notes.md
View File

File diff suppressed because one or more lines are too long

33
styles/elements/banners.css
View File

@@ -4,7 +4,7 @@
--banner_height: var(--base_banner_height); /*default*/ --banner_height: var(--base_banner_height); /*default*/
height: min(26vw, var(--banner_height)); height: min(26vw, var(--banner_height));
background-image: url(../img/banner_1.svg); /*default*/ background-image: url(../../docs/banners/banner_1.svg); /*default*/
background-size: contain; background-size: contain;
background-repeat: repeat; background-repeat: repeat;
background-position-x: 0%; background-position-x: 0%;
@@ -54,23 +54,44 @@
* sizes * sizes
* *
*/ */
.banner_size_0 {
background-image: url(../../docs/banners/banner_0.svg);
--banner_height: calc(var(--base_banner_height) * 1);
}
.banner_size_00 {
background-image: url(../../docs/banners/banner_00.svg);
--banner_height: calc(var(--base_banner_height) * 1);
}
.banner_size_1 { .banner_size_1 {
background-image: url(../img/banner_1.svg); background-image: url(../../docs/banners/banner_1.svg);
--banner_height: calc(var(--base_banner_height) * 1); --banner_height: calc(var(--base_banner_height) * 1);
} }
.banner_size_2 { .banner_size_2 {
background-image: url(../img/banner_2.svg); background-image: url(../../docs/banners/banner_2.svg);
--banner_height: calc(var(--base_banner_height) * 2); --banner_height: calc(var(--base_banner_height) * 2);
} }
.banner_size_3 { .banner_size_3 {
background-image: url(../img/banner_3.svg); background-image: url(../../docs/banners/banner_3.svg);
--banner_height: calc(var(--base_banner_height) * 3); --banner_height: calc(var(--base_banner_height) * 3);
} }
.banner_size_4 { .banner_size_4 {
background-image: url(../img/banner_4.svg); background-image: url(../../docs/banners/banner_4.svg);
--banner_height: calc(var(--base_banner_height) * 4); --banner_height: calc(var(--base_banner_height) * 4);
} }
.banner_size_5 { .banner_size_5 {
background-image: url(../img/banner_5.svg); background-image: url(../../docs/banners/banner_5.svg);
--banner_height: calc(var(--base_banner_height) * 5); --banner_height: calc(var(--base_banner_height) * 5);
} }
/*
* individual banners
*
*/
#top_banner {
position: absolute;
top: 0px;
left: 0px;
}

56
styles/elements/cv.css
View File

@@ -1,38 +1,34 @@
.cv {
#cv { width: auto;
/*
place-items: center;
place-self: stretch;
*/
grid-template-columns: 1fr minmax(auto, 900px) 1fr;
}
#cv header {
height: 300px;
}
#cv article {
/*
max-width: 900px; max-width: 900px;
*/
} }
#cv article h2 {
text-align: center; details.cv {
display: flex;
summary {
position: relative;
list-style-position: outside;
list-style-type: "▸ ";
font-size: 1.8rem;
margin: auto;
width: fit-content;
.open {
display: none;
} }
#cv #cv_ascii { .close {
/* display: inline;
place-self: center;
*/
} }
#cv #cv_download {
/*
place-self: center;
*/
} }
#cv details { &[open] summary {
margin: 0px 0px 0px 25px; list-style-type: "▾ ";
.open {
display: inline;
} }
#cv summary { .close {
padding: 10px 0px; display: none;
}
}
> *:last-child {
margin-bottom: 100px;
} }
#cv .mouse {
margin-top: 100px;
} }

17
styles/elements/hero.css
View File

@@ -1,16 +1,13 @@
#hero { #hero {
grid-template-rows: 1fr auto auto;
min-height: 100vh; min-height: 100vh;
/* grid-template-rows: 1fr auto 1fr;
grid-template-rows: 1fr 50px auto auto; .subtitle {
*/ text-align: center;
} }
#hero header { details {
padding-top: 50px; #cv_download {
margin-top: 20px;
text-align: center;
} }
#hero .mouse {
} }
#hero .banner {
} }

75
styles/elements/mouses.css
View File

@@ -1,53 +1,48 @@
@import "./mouses/mouse_1.css";
@import "./mouses/mouse_2.css";
@import "./mouses/mouse_3.css";
@import "./mouses/mouse_4.css";
.mouse { .mouse {
position: relative; margin: auto;
margin: 20px 0px;
}
.frames_container {
display: grid;
grid-template-rows: 1fr;
width: fit-content; width: fit-content;
} overflow: hidden;
pre.frame.hide {
display: none; > div {
} position: relative;
pre.frame { top: 0%;
position: relative;
justify-items: start; /*
align-items: end; * for pseudo elements ::before and ::after
grid-column: 1; * for some reason it does not work when applied to them directly
grid-row: 1; * if they are not position absolute
*/
white-space: pre;
line-height: 0.8;
font-size: 1.0rem;
opacity: 0;
--tframes: 2s; --tframes: 2s;
animation-name: ascii_frame; animation-name: mouse_move;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-duration: var(--tframes); animation-duration: var(--tframes);
animation-timing-function: steps(3);
animation-direction: normal; animation-direction: normal;
animation-timing-function: steps(1);
}
> div::before {
position: relative;
top: 0px;
left: 0px;
} }
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);} > div::after {
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);} position: absolute;
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} top: 100%;
left: 0px;
@keyframes ascii_frame {
0% {opacity: 1;}
25% {opacity: 1;}
25.1% {opacity: 0;}
100% {opacity: 0;}
} }
#mouse_1 {
place-self: center;
} }
#mouse_2 { @keyframes mouse_move {
left: 10%; 0% {top: 0%;}
25% {top: -100%;}
50% {top: -200%;}
75% {top: -300%;}
} }
#mouse_3 {
left: 60%;
}
#mouse_4 {
left: 20%;
}

72
styles/elements/mouses/mouse_1.css Normal file
View File

@@ -0,0 +1,72 @@
.mouse_1::before {
content:'\
 \a
   \a
      \a
       \a
          \a
       \a
     \a
     \a
     \a
     \a
        \a
        \a
     \a
      \a
    \a
    \a
';
}
.mouse_1::after {
content:'\
 \a
  \a
     \a
       \a
        \a
       \a
      \a
      \a
     \a
      \a
         \a
         \a
      \a
      \a
    \a
    \a
 \a
  \a
     \a
       \a
        \a
       \a
      \a
      \a
     \a
      \a
         \a
         \a
      \a
      \a
    \a
    \a
 \a
   \a
      \a
       \a
          \a
       \a
     \a
     \a
     \a
     \a
        \a
        \a
     \a
      \a
    \a
    \a
';
}

72
styles/elements/mouses/mouse_2.css Normal file
View File

@@ -0,0 +1,72 @@
.mouse_2::before {
content:'\
 \a
  \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
  \a
 \a
';
}
.mouse_2::after {
content:'\
  \a
   \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
 \a
 \a
  \a
  \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
  \a
 \a
 \a
  \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
 \a
 \a
';
}

64
styles/elements/mouses/mouse_3.css Normal file
View File

@@ -0,0 +1,64 @@
.mouse_3::before {
content:'\
 \a
 \a
  \a
   \a
 \a
   \a
   \a
    \a
    \a
   \a
   \a
    \a
   \a
  \a
';
}
.mouse_3::after {
content:'\
 \a
 \a
  \a
   \a
 \a
   \a
   \a
    \a
    \a
  \a
   \a
    \a
   \a
  \a
 \a
 \a
  \a
   \a
 \a
   \a
   \a
    \a
    \a
   \a
   \a
    \a
   \a
  \a
\a
\a
 \a
  \a
 \a
   \a
    \a
   \a
   \a
    \a
    \a
    \a
    \a
  \a
';
}

64
styles/elements/mouses/mouse_4.css Normal file
View File

@@ -0,0 +1,64 @@
.mouse_4::before {
content:'\
 \a
 \a
  \a
  \a
    \a
      \a
     \a
   \a
    \a
   \a
    \a
   \a
  \a
 \a
';
}
.mouse_4::after {
content:'\
 \a
 \a
  \a
  \a
    \a
     \a
     \a
    \a
    \a
   \a
    \a
  \a
  \a
 \a
 \a
 \a
  \a
   \a
    \a
     \a
      \a
    \a
    \a
   \a
    \a
  \a
  \a
 \a
 \a
 \a
  \a
   \a
    \a
      \a
      \a
   \a
    \a
   \a
    \a
   \a
  \a
 \a
';
}

40
styles/elements/sections.css
View File

@@ -1,41 +1,35 @@
section header { grid-area: header; }
section article { grid-area: article; }
section .mouse { grid-area: mouse; }
section .banner { grid-area: banner; }
section { section {
display: grid; display: grid;
margin: 0px; margin: 0px;
width: 100vw; width: 100vw;
grid: grid-template-columns: 1fr auto 1fr;
' . header . ' auto grid-auto-rows: auto;
' . article . ' auto
' . mouse . ' auto
' banner banner banner ' auto
/ 1fr auto 1fr ;
grid-gap: 10px; grid-gap: 10px;
gap: 10px; gap: 10px;
min-height: 100vh; min-height: 100vh;
} justify-items: center;
section header { header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-content: center; place-content: center;
}
section footer { h1 {
display: flex;
flex-direction: column;
}
section header h1 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
section .banner {
overflow-x: hidden;
} }
> * {
grid-column: 2 / span 1;
}
> .grid_full_width {
grid-column: 1 / span 3;
}
.banner {
overflow-x: hidden;
}
}

BIN
styles/fonts/notomono/NotoMono_6dots.woff
View File

Binary file not shown.

BIN
styles/fonts/notomono/NotoMono_6dotsNspace.woff
View File

Binary file not shown.

BIN
styles/fonts/notomono/NotoMono_e066.woff
View File

Binary file not shown.

15
styles/global.css
View File

@@ -16,6 +16,21 @@
} }
.margin_top_small {
margin-top: 10px;
}
.margin_bottom_small {
margin-bottom: 10px;
}
.margin_top_big {
margin-top: 50px;
}
.margin_bottom_big {
margin-bottom: 50px;
}
/* /*
DATA-FLEX DATA-FLEX

7
styles/style.css
View File

@@ -1,7 +1,10 @@
:root { :root {
--base_font_size: 62.5%;
} }
body, main { html {
font-size: var(--base_font_size);
}
body {
overflow-x: clip; overflow-x: clip;
margin: auto; margin: auto;
width: fit-content; width: fit-content;

46
styles/text.css
View File

@@ -6,31 +6,17 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
html { body, pre {
font-size: 62.5%;
}
body * {
font-family: "notomono", monospace; font-family: "notomono", monospace;
font-size: 1.8rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.pre, pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1.0rem);
}
.pre_small {
font-size: min(1.5vw, 0.7rem);
}
/* /*
for screen larger than 500px
*/ */
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
body { html {
font-size: 1.5rem; font-size: calc(var(--base_font_size) * 1.2);
} }
} }
ul { ul {
@@ -48,19 +34,7 @@ li {
li::marker { li::marker {
font-size: 1.8rem; font-size: 1.8rem;
} }
details summary {
/*
list-style-position: inside;
*/
list-style-position: outside;
}
details summary {
font-size: 1.8rem;
list-style-type: "▸ ";
}
details[open] summary {
list-style-type: "▾ ";
}
a:empty::after { a:empty::after {
content: attr(href); content: attr(href);
} }
@@ -71,3 +45,13 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
h5 { margin: 10px 0px; font-size: 1.25rem; } h5 { margin: 10px 0px; font-size: 1.25rem; }
h6 { margin: 10px 0px; font-size: 1.0rem; } h6 { margin: 10px 0px; font-size: 1.0rem; }
.pre, pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1.0rem);
}
.pre_small {
font-size: min(1.5vw, 0.7rem);
}