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

css fill possible for mouses, unlikely for banners

Browse Source
This commit is contained in:
asus
2023-11-19 17:53:47 +01:00
parent f027ca2752
commit ea781e2aac
4 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -592,6 +592,7 @@
<!--
BANNER 4
-->
@@ -646,16 +647,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>
<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>
<p>here</p>
<div id="test"></div>
</body>

4
styles/elements/mouses.css
View File

@@ -6,13 +6,11 @@
.frames_container {
display: grid;
width: fit-content;
/*
border: 1px solid blue;
*/
}
.frame.hide {
display: none;
}
.frame {
position: relative;
grid-column: 1;

134
styles/elements/test.css
View File

@@ -1,87 +1,97 @@
#test {
border: 1px solid blue;
width: 100px;
height: 100px;
background-image: url(" \
data:image/svg+xml;utf8, \
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='100%'>\
<text x='0' y='15'>\
I love SVG!\
</text>\
</svg>");
}
/*
#test::after {
content: "  \a   \a   \a  \a \a  \a  \a  \a  \a    \a    \a  \a     \a    \a  \a ";
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  ";
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  ";
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  ";
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  ";
content: " \A   \A  \A   \A    \A   \A   \A    \A    \A    \A    \A  ";
/*

  
 
  
   
  
  
   
   
   
   
 

  
 
  
   
  
  
   
   
   
   
 
*/
}

1
styles/text.css
View File

@@ -39,4 +39,5 @@ h6 { margin: 10px 0px; font-size: 1.0rem; }
pre, .ascii {
line-height: 0.8;
font-size: min(2.2vw, 1.0rem);
white-space: pre;
}