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

start test mouses in css

Browse Source
This commit is contained in:
asus
2023-11-19 16:35:11 +01:00
parent f80c7608b2
commit f027ca2752
5 changed files with 110 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -646,6 +646,14 @@
--> -->
<div class="ascii" id="test"></div>
<figure class="frames_container mouse" id="mouse_test">
<div class="ascii frame f1"></div>
<div class="ascii frame f2"></div>
<div class="ascii frame f3"></div>
<div class="ascii frame f4"></div>
</figure>

10
styles/elements/mouses.css
View File

@@ -10,10 +10,10 @@
border: 1px solid blue; border: 1px solid blue;
*/ */
} }
pre.frame.hide { .frame.hide {
display: none; display: none;
} }
pre.frame { .frame {
position: relative; position: relative;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
@@ -35,9 +35,9 @@ pre.frame {
animation-direction: normal; animation-direction: normal;
} }
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);} .frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);} .frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} .frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
@keyframes ascii_frame { @keyframes ascii_frame {
0% {opacity: 1;} 0% {opacity: 1;}

101
styles/elements/test.css
View File

@@ -1,24 +1,87 @@
#test::after { #test::after {
content: "  \a   \a   \a  \a \a  \a  \a  \a  \a    \a    \a  \a     \a    \a  \a "; content: "  \a   \a   \a  \a \a  \a  \a  \a  \a    \a    \a  \a     \a    \a  \a ";
white-space: pre-wrap; white-space: pre;
/* }
  .mouse .frame {
   white-space: pre;
   }
 
 #mouse_test .frame.f1::before {
  content: " \A \A  \A   \A \A   \A   \A    \A    \A   \A   \A    \A   \A  ";
  /*
 
 
    
  
       
     
    
  
  
  
   
  
 
*/ */
} }
#mouse_test .frame.f2::before {
content: " \A \A  \A   \A \A   \A   \A    \A    \A  \A   \A    \A   \A  ";
/*
 
  

  
  
   
   
 
  
   
  
 
*/
}
#mouse_test .frame.f3::before {
content: " \A \A  \A   \A \A   \A   \A    \A    \A   \A   \A    \A   \A  ";
/*
 
  

  
  
   
   
  
  
   
  
 
*/
}
#mouse_test .frame.f4::before {
content: " \A   \A  \A   \A    \A   \A   \A    \A    \A    \A    \A  ";
/*

  
 
  
   
  
  
   
   
   
   
 
*/
}

2
styles/frames.css
View File

@@ -1,2 +0,0 @@

2
styles/text.css
View File

@@ -36,7 +36,7 @@ h3 { margin: 20px 0px; font-size: 1.75rem; }
h4 { margin: 20px 0px; font-size: 1.5rem; } 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, .ascii {
line-height: 0.8; line-height: 0.8;
font-size: min(2.2vw, 1.0rem); font-size: min(2.2vw, 1.0rem);
} }